# The experimental CSS border-shape property for non-rectangular elements

DevFeed: [The experimental CSS border-shape property for non-rectangular elements](<https://devfeed.tech/articles/border-shape-the-future-of-the-non-rectangular-web-28777.md>)

Original publisher: [Read original article](<https://una.im/border-shape/>)

Published: 2026-02-19T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [Chrome Canary](<https://devfeed.tech/topics/chrome-canary.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [chrome-canary](<https://devfeed.tech/tags/chrome-canary.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [demo](<https://devfeed.tech/tags/demo.md>), [experimental](<https://devfeed.tech/tags/experimental.md>), [property](<https://devfeed.tech/tags/property.md>), [syntax](<https://devfeed.tech/tags/syntax.md>), [web-platform](<https://devfeed.tech/tags/web-platform.md>)

## AI overview

This article introduces the experimental CSS border-shape property, which defines custom border geometry for non-rectangular elements. It explains how backgrounds, borders, outlines, and shadows follow the new shape, compares it with border-radius, and demonstrates creating tooltips with a fallback.

## Source excerpt

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