Add proper border support for UI nodes

[TimJentzsch]

What problem does this solve or what need does it fill?

Adding borders to UI elements is a common need, both for design and debugging.
Currently, we can only set the width of the border, but not the color. So it doesn't have a real visual effect at the moment.

What solution would you like?

Ideally, we should be able to define the following properties:

• Border color
• Border width (this is already possible)
• Border radius (i.e. round corners; both pixel and percent values should be possible here)

We could also think about supporting more complex styles, like dashed borders.

Once #5513 is merged, it probably makes sense to have all of these together in a style component.

Additionally, we could think about supporting outlines as well. These are essentially additional borders around the normal borders and can be used for accessibility features like visualizing keyboard focus.

What alternative(s) have you considered?

Currently it's sort of possible to make "borders" by wrapping the node in another node that is slightly larger and has a background color.

This approach is very limited and not ergonomic at all.

Additional context

• Borders in CSS (MDN)
• Outlines in CSS (MDN)

[alice-i-cecile]

Previously attempted in #3991.

[oceantume]

I'm willing to revisit this at some point when #5513 is merged. I think one big concern was the amount of changes that was necessary in the UI rendering to implement it. Another concern for me was the anti-aliasing for borders which was implemented directly in the shader by fading the borders a little bit.

As someone with limited experience writing rendering code, I'm down to try and write something that works, but I would prefer that it goes through thorough review to find the most optimal solution.

#90 would offer a completely different and much more flexible approach to do this, but I think we would gain from having both be available since one is a simple way to define border properties while the other would be a full drawing API.

[alice-i-cecile]

#90 would offer a completely different and much more flexible approach to do this, but I think we would gain from having both be available since one is a simple way to define border properties while the other would be a full drawing API.

Agreed, I'd be frustrated if the only way to draw simple borders was a canvas API.

[afonsolage]

Also, first DioxusLabs/taffy#223 needs to be done, since it's not possible to differentiate between border and margin calculated values.

[nicoburns]

Also, first DioxusLabs/taffy#223 needs to be done, since it's not possible to differentiate between border and margin calculated values.

This could potentially be exposed by Taffy as an output, but it is possible to differentiate by referring to the input styles. Where the style is a pixel value this can be taken as-is. Where the style is a percentage, this can be resolved against the width of the parent node (as computed by Taffy)