Una's article for examples: https://una.im/border-shape
On Monday, March 2, 2026 at 1:30:26 PM UTC+1 Chromestatus wrote: > *Contact emails* > [email protected], [email protected] > > *Explainer* > https://github.com/noamr/explainers/blob/main/border-shape-explainer.md > > *Specification* > https://drafts.csswg.org/css-borders-4/#border-shape > > *Summary* > CSS border-shape enables creating non-rectangular borders, with any > arbitrary shape (polygon, circle, shape(), etc). Though border-shape > accepts the same shapes as clip-path, it is fundamentally different: > border-shape defines the shape of the border, decorates it, and clips only > the inside. border-shape has two variants: one variant that strokes a > shape, and another variant that fills between two shapes. > > *Blink component* > Blink>CSS > <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> > > *Web Feature ID* > *No information provided* > > *Motivation* > Together with shape() and corner-shape, border-shape allows authoring > non-box designs in the web, enabling a more expressive and beautiful web. > It addresses an old limitation where clipping is free-form but borders are > rectangular. > > *Initial public proposal* > https://drafts.csswg.org/css-borders-4/#border-shape > > *TAG review* > *No information provided* > > *TAG review status* > Pending > > *Risks* > > > *Interoperability and Compatibility* > *No information provided* > > *Gecko*: No signal ( > https://github.com/mozilla/standards-positions/issues/1365) > > *WebKit*: No signal ( > https://github.com/WebKit/standards-positions/issues/625) > > *Web developers*: Positive ( > https://bsky.app/profile/una.im/post/3me56xpfksk2i) > > *Other signals*: > > *WebView application risks* > > Does this intent deprecate or change behavior of existing APIs, such that > it has potentially high risk for Android WebView-based applications? > *No information provided* > > > *Debuggability* > *No information provided* > > *Will this feature be supported on all six Blink platforms (Windows, Mac, > Linux, ChromeOS, Android, and Android WebView)?* > Yes > > *Is this feature fully tested by web-platform-tests > <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?* > Yes > https://wpt.fyi/results/css/css-borders/tentative/border-shape > > *Flag name on about://flags* > CSSBorderShape > > *Finch feature name* > CSSBorderShape > > *Rollout plan* > Will ship enabled for all users > > *Requires code in //chrome?* > False > > *Tracking bug* > https://issues.chromium.org/issues/370041145 > > *Estimated milestones* > Shipping on desktop 147 > Shipping on Android 147 > Shipping on WebView 147 > > *Anticipated spec changes* > > Open questions about a feature may be a source of future web compat or > interop issues. Please list open issues (e.g. links to known github issues > in the project for the feature specification) whose resolution may > introduce web compat/interop risk (e.g., changing to naming or structure of > the API in a non-backward-compatible way). > *No information provided* > > *Link to entry on the Chrome Platform Status* > https://chromestatus.com/feature/5459864205393920?gate=6268824718147584 > > *Links to previous Intent discussions* > Intent to Prototype: > https://groups.google.com/a/chromium.org/d/msgid/blink-dev/68514a79.170a0220.61ffc.082a.GAE%40google.com > > > This intent message was generated by Chrome Platform Status > <https://chromestatus.com>. > -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4235ba5b-f70f-491d-a2e4-e8597b90b183n%40chromium.org.
