border-shape: 非矩形网页的未来

Published on February 19, 2026

发布于 2026 年 2 月 19 日

Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with clip-path. More recently, corner-shape landed in Chrome, which gives us more options for styling how a corner looks, but is still quite limited.

在 web 上创建非标准形状，如对话气泡或心形，通常需要使用 clip-path 切断实际边框。最近，corner-shape 在 Chrome 中落地，这为我们提供了更多样式化角落外观的选项，但仍然相当有限。

This is where border-shape comes in. It’s a powerful upcoming CSS primitive that defines a custom shape for an element’s border.

这就是 border-shape 的用武之地。它是一个强大的即将推出的 CSS 原语，用于为元素的边框定义自定义形状。

border-shape is currently available for testing in Chrome Canary 146+ with the experimental web platform features flag turned on. Part of the CSS Borders and Box Decorations Module Level 4, this property allows developers to define the geometry of an element’s border using the same flexible syntax we use for paths and shape().

border-shape 目前可以在开启 experimental web platform features 标志的 Chrome Canary 146+ 中测试。这是 CSS Borders and Box Decorations Module Level 4 的一部分，该属性允许开发者使用我们用于路径和 shape() 的相同灵活语法来定义元素的边框几何形状。

All about border-shape #

关于 border-shape #

Unlike clip-path, which simply masks an element, border-shape actually redefines the “box” itself. When you apply a shape to a border, the background, the border-image, focus outline, and the box-shadow all follow that new geometry.

与仅简单掩码元素的 clip-path 不同，border-shape 实际上重新定义了“box”本身。当你将形状应用到边框时，背景、border-image、焦点轮廓和 box-shadow 都会遵循新的几何形状。

See demo on Codepen

在 Codepen 上查看演示

The property accepts several values, including:

该属性接受几个值，包括：

• Basic Shapes: circle(), ellipse(), inset(), and polygon().
• Basic Shapes: circle()、ellipse()、inset() 和 polygon()。
• The shape() function: A powerful new way to draw complex paths directly in CSS (in Chrome and a part of Interop 2026)
• The shape() function: 一种强大的新方法，可以直接在 CSS 中绘制复杂路径（在 Chrome 中可用，并且是Interop 2026的一部分）
• Path Strings: Similar to SVG path data (e.g., path("M 10 10 L 90 10 ...")).
• Path Strings: 类似于 SVG 路径数据（例如，path("M...