CSS border-shape property shapes boxes while preserving borders and shadows
A new CSS property called border-shape is in development, addressing a long-standing limitation where using clip-path to shape an element would also clip its borders, outlines, and box-shadows. Unlike clip-path, which cuts the entire painted element including decorations, border-shape reshapes the box boundary so that borders and shadows follow the new outline instead of being removed. The property accepts the same values as clip-path, including the shape() and polygon() functions, and also supports a fill mode where the border renders as the area between two defined paths. CSS-Tricks published an explainer by Temani Afif detailing the mechanics and syntax of the property. Currently, border-shape is only supported in Chromium-based browsers, making it unsuitable for production use but available for experimentation in side projects.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in