Get Ready For the Powerful CSS border-shape Property!
Discover the upcoming CSS border-shape property that makes adding borders and shadows to custom shapes easier than ever before.
Stock photo for illustration only, not from the actual event
- The shape() and corner-shape features allow easy SVG-to-CSS conversion and precise corner control.
- Traditional CSS shapes suffer from a major drawback where borders and box-shadows get clipped away.
- The border-shape property solves this by allowing decorations to follow the actual shape instead of the element box.
- It shares similar syntax with clip-path, making it incredibly intuitive and easy to learn.
The CSS landscape is welcoming exciting new additions like shape(), corner-shape, and now border-shape. The shape() function introduces an easy way to use SVG syntax for clip-path and offset-path, allowing developers to convert any SVG shape into a CSS shape smoothly without dealing with complex path syntax.
Meanwhile, corner-shape works alongside border-radius, giving developers control over element corners using predefined keywords. While most of these shapes could already be created using clip-path or mask, corner-shape brings a massive advantage: the ability to easily add borders and decorations that conform to those modified corners, solving a long-standing nightmare in web design.
The evolution of advanced CSS shape properties highlights a major shift toward reducing reliance on external image assets for complex UI designs. Allowing properties like borders and box-shadows to track custom geometric paths natively rather than strict rectangular boxes dramatically improves rendering performance and opens up new creative possibilities for layout styling.
However, the real game-changer is border-shape, which expands shaping capabilities from just the corners to the entire element. It accepts the same values as clip-path, including the new shape() function. Unlike clip-path and mask which clip out everything including decorations making borders impossible, border-shape actually "shapes" the element so that borders and box-shadows follow along naturally.
Stock photo for illustration only, not from the actual event
When using a single basic-shape in stroke mode, the border renders along the path with its width determined by the computed border width. When using two basic-shapes in fill mode, the border renders in the area between the outer and inner paths, giving precise control over the geometry. It is also worth noting that when working with border-shape, border-radius is entirely ignored since the element itself is now fully shaped.
Beyond cutout shapes and clean outlines, border-shape also enables breakout decorations where elements and borders interact dynamically. Although browser support is currently limited to Chrome-only at the time of writing, now is the ideal time to explore and experiment with its full potential before widespread adoption.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment