Add CSS support for the Border control

[sthewissen]

Description

Currently, while there are already controls in .NET MAUI that support setting borders through CSS (Frame, Button e.g.), there is no native support for defining borders directly through CSS for the actual Border control. This feature request proposes the addition of CSS syntax (either through the CSS equivalent or a custom MAUI format) and corresponding support for styling Border with CSS in .NET MAUI.

The W3C CSS spec allows for setting 3 different border-related properties:

• border-color - A solid color (e.g. #ff0000).
• border-style - A predefined set of styles such as solid, dotted, dashed.
• border-width - A numeric value indicating width.

The translation to .NET MAUI could be:

• border-color - A brush which could be a gradient or solid color (parsable through BrushTypeConverter).
• border-style - If we want to adhere to CSS standard we would need to use the predefined styles and adjust StrokeDashOffset and StrokeDashPattern accordingly.
• border-width - Could be matched one to one.

However, the current .NET MAUI implementation of the CSS properties related to border already has two of these 3 properties for other controls:

• border-color - A solid color (so no gradient support).
• border-width - Maps nicely.
• border-radius - A non existent thing in actual CSS.

While the border radius property doesn't exist in official CSS, it could actually be useful to apply to Border as it would translate to StrokeShape through a new converter which would convert the incoming numerical value to RoundRectangle [numeric]. I suppose a discussion to be had is how we can best structure existing border-related CSS attributes in .NET MAUI with the various new ones Border would require.

Public API Changes

I would expect at the very least the following API changes to be required:

• Add StyleProperty declarations to AssemblyInfo.cs.

[assembly: StyleProperty("border-color", typeof(Border), nameof(Border.StrokeProperty))] // Using BrushTypeConverter
[assembly: StyleProperty("border-width", typeof(Border), nameof(Border.StrokeThicknessProperty))]
[assembly: StyleProperty("border-radius", typeof(Border), nameof(Border.StrokeShapeProperty))] // + a new converter

• Add a converter that can handle a numeric border radius to a StrokeShape.

However, this is very much dependent on the discussion to be had on how we can harmonize border properties from Button and Frame with the ones on Border.

Intended Use-Case

Using CSS to style the borders, we could either use it to set a complete border in a single line, or use various classes and combine them accordingly through StyleClass to make a border. Given that Border has various overlaps to CSS, I feel like it's a missing piece that can go a long way to users styling their apps in a modern fashion.

/* Scenario 1: */
.border-singleline {
   border: 8 solid #ff0000;
}

/* Scenario 2: */
.border-thick {
    border-color: #ff0000; 
    border-radius: 40;
    border-width: 8;
}

Which would be used as such in XAML:

<Border StyleClass="border-singleline">
   <Label Text="Hello world!" />
</Border>