Learn about new geometry capabilities with this game-changing experimental CSS feature.

Una provides insights into web accessibility, inclusive design, and user experience best practices. Developers can explore Una's  articles, guides, and resources to gain a deeper understanding of accessibility standards, design principles, and usability considerations. By embracing Una's teachings, developers can ensure that their digital products are accessible to all users, regardless of their abilities or impairments, and create more inclusive and user-friendly experiences for everyone.

Una Kravets

The experimental CSS `border-shape` property, available in Chrome Canary 146+ behind a flag, redefines how elements can take on non-rectangular geometry. Unlike `clip-path` which merely masks an element, `border-shape` redefines the actual box so that backgrounds, border-images, focus outlines, and box-shadows all conform to the new shape. It accepts basic shapes (`circle()`, `ellipse()`, `polygon()`), the new `shape()` function with SVG-like path commands, and raw path strings. The post compares it to `corner-shape` (limited to corner styling) and walks through practical demos: CSS tooltips with dynamic arrow positioning, chevron navigation tabs, and scalloped borders using arc commands. Code examples show how CSS custom properties can parameterize shapes, and a `clip-path` fallback strategy is recommended for unsupported browsers. The feature is part of CSS Borders and Box Decorations Level 4.

border-shape: the future of the non-rectangular web