border-shape

Developer use cases

• The most obvious use case for the border-shape property is for an element to still retain its shapes as well as its shadows and borders without the element masking or clipping them out. Developers have been relying on various hacks on psuedo elements, masks and box-shadows to achieve these effects that they desire when using the clip-path property. The clip-path property's only disadvantage is that as soon as the developer draws a certain shape of any kind, it also removes box shadows and borders from that element. The border-shape property is a very powerful and solves this problem, that way developers can be able to draw shapes of an element and still retain their box shadows and borders without relying on the previous hacks that we used in the past. I am certain for sure that developers will be very happy if this property is supported in alll major browsers, since the shape() for the clip-path property became officially baseline thanks to Interop 2026.

  The most obvious use case for the border-shape property is for an element to still retain its shapes as well as its shadows and borders without the element masking or clipping them out. Developers have been relying on various hacks on psuedo elements, masks and box-shadows to achieve these effects that they desire when using the clip-path property. The clip-path property's only disadvantage is that as soon as the developer draws a certain shape of any kind, it also removes box shadows and borders from that element. The border-shape property is a very powerful and solves this problem, that way developers can be able to draw shapes of an element and still retain their box shadows and borders without relying on the previous hacks that we used in the past. I am certain for sure that developers will be very happy if this property is supported in alll major browsers, since the shape() for the clip-path property became officially baseline thanks to Interop 2026. [see original comment]