[css-background-4] Improvements to border-image

The current state of border-image is...less than stellar. There are two main problems I've run into:

1. Unlike background-image, border image sources cannot be layered.
2. Border images are fully unaffected by border-style and border-radius.

The former is a simple parity issue - the value of border-image-source could be converted from none | <image> to <bg-image>#  without breaking existing CSS, and the other border-image properties could be made to support groups as well.

While the latter makes a lot of sense for using a sliced image, this becomes an issue if you want to use a gradient as a border - as <gradient> is a subtype of <image>, this results in gradient borders being unable to use the features you'd use with a solid-colored or hidden border. While there are workarounds, they're not pretty - take for example this post from blep on cohost: https://cohost.org/blep/post/1445650-gui-design-thin

I'm not quite sure of an optimal solution for this, as changing it would inherently change the visual presentation of any websites that use the current behavior. However, I feel it's still important to consider, as design trends like neumorphism are starting to bring back gradients in ways where having a gradient border with a radius would be desirable.

I'm new to spec proposals, so please don't hesitate to let me know if I've missed anything! Thank you for your time!

Regards,
-Meredith

Received on Friday, 5 May 2023 13:35:31 UTC