Technical review: Document border-shape

[chrisdavidmills]

Description

Chrome 147 adds support for the border-shape property; see https://chromestatus.com/feature/5459864205393920.

This PR documents the new property.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (3 pages)

• /en-US/docs/Web/CSS/Guides/Borders_and_box_decorations
• /en-US/docs/Web/CSS/Reference/Properties/border-shape
• /en-US/docs/Web/CSS/Reference/Values/box-edge

Flaws (4)

Note! 2 documents with no flaws that don't need to be listed. 🎉

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/Properties/border-shape
Title: border-shape CSS property
Flaw count: 4

• macros:
  • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/top which doesn't resolve
  • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/right which doesn't resolve
  • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/bottom which doesn't resolve
  • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/left which doesn't resolve

External URLs (1)

URL: /en-US/docs/Web/CSS/Reference/Properties/border-shape
Title: border-shape CSS property

• https://una.im/border-shape (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2026-05-26 13:16:02)

[danielsakhapov]

we should probably keep it?

[chrisdavidmills]

This is a list of properties that are not yet supported in any browser. I've removed border-shape here since it is now supported in Chromium, and added it to the bulleted list above the paragraph.

[danielsakhapov]

Maybe add some note and examples on box-shadow?

And put some examples at the very start of the article (since it's quite a visual feature?).

I guess also showing an example with a tooltip could be helpful (and explaining the difference between a tooltip with clip-path vs border-shape)?

[chrisdavidmills]

Maybe add some note and examples on box-shadow?

I've already included multiple examples that demonstrate how box-shadow interacts with border-shape, and called it out in the "Description" section. Is there anything more to say here?

[chrisdavidmills]

And put some examples at the very start of the article (since it's quite a visual feature?).

I guess also showing an example with a tooltip could be helpful (and explaining the difference between a tooltip with clip-path vs border-shape)?

In my next commit, I have added a section to the description that compares border-shape and clip-path.

To address your other points here, I will also add a tooltip example, hopefully as a live interactive example at the very top of the article.

[chrisdavidmills]

To address your other points here, I will also add a tooltip example, hopefully as a live interactive example at the very top of the article.

The interactive example looked really messy, so I instead put an example high up inside the description. I decided to do a speech bubble rather than a tooltip, as it was more interesting.