配了八年气泡框，今天发现根本不用套那层 div——border-shape 把这件事彻底原生化了

做气泡框、异形边框，你还在用伪元素套一层？border-shape 把这件事彻底原生化了——Chrome 149 以后的浏览器，自己会画。

做气泡提示框要套一层 div 写三角箭头，做波浪边框要 clip-path 切图——这套活儿前端干了十几年。今天 Chrome 149 把 border-shape 原生化了，终于不用再套壳。

它解决什么问题

传统 CSS 的 border 永远是矩形。要做异形边框，只有两条路：要么用伪元素画三角形接上去，要么 clip-path 裁内容。两条路都有代价——伪元素多一个 DOM，clip-path 裁的是内容不是边框本身。

border-shape 直接在边框本身上做文章。它让 border 变成任意形状：圆形、多边形，甚至 SVG 路径。

语法

/* 单一形状，四边一致 */
border-shape: circle(50%);
border-shape: polygon(50% 0%, 100% 100%, 0% 100%);

/* 两个形状，分别控制对边 */
border-shape: circle(50%) polygon(50% 0%, 100% 100%, 0% 100%);

/* 配合 geometry-box 指定参考框 */
border-shape: circle(50%) border-box;
border-shape: path("M 10,10 L 90,10 L 90,90 L 10,90 Z") margin-box;

/* 关键词 */
border-shape: none; /* 默认 */

支持所有 CSS 几何形状函数：circle()、ellipse()、rect()、polygon()、shape()，以及 path() 直接写 SVG 路径字符串。

实战：做气泡提示框

以前要这样：

<div class="bubble">
  <div class="arrow"></div>
  内容文字
</div>

.arrow {
  position: absolute;
  bottom: -10px;
  left: 20px;
  border: 10px solid transparent;
  border-top-color: #333;
}

现在一条 border-shape 全搞定：

.bubble {
  background: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  border-shape: polygon(
    0% 0%,
    15% 0%,
    15% 60%,
    5% 70%,
    8% 100%,
    0% 100%,
    0% 0%
  );
}

不需要任何伪元素，不需要额外的 DOM，边框的三角箭头直接画在 border 上。

另一个例子：多边形卡片

.hero-card {
  border: 3px solid #6366f1;
  border-shape: polygon(
    0% 5%,
    5% 0%,
    95% 0%,
    100% 5%,
    100% 95%,
    95% 100%,
    5% 100%,
    0% 95%
  );
  padding: 24px;
}

切角矩形以前要背景图或者 clip-path，现在一条 border-shape 搞定，而且画的是边框本身，不是内容裁剪。

和 clip-path 的区别

很多人会混淆这两个。核心区别：clip-path 裁内容，border-shape 画边框。

/* clip-path 裁的是内容，边框还是矩形 */
box {
  clip-path: polygon(...);
  border: 2px solid red; /* 边框形状不受影响 */
}

/* border-shape 真的在画异形边框 */
box {
  border-shape: polygon(...);
  border: 2px solid red; /* 边框本身变多边形 */
}

浏览器状态

Chrome Canary 146+ 实验性支持，需要在 chrome://flags 里开启「Experimental Web Platform Features」。目前还不是稳定功能，生产环境建议用 @supports 做渐进增强：

.card {
  border: 2px solid #333;
}

@supports (border-shape: polygon(0 0, 100% 0, 100% 100%)) {
  .card {
    border-shape: polygon(
      0% 0%, 8% 0%,
      100% 0%, 100% 92%,
      92% 100%, 0% 100%
    );
  }
}

怎么用它

如果你现在做气泡框、异形卡片，还在用伪元素套三角、clip-path 切图，这套活儿可以扔了。border-shape 把”画边框”这件事还给了 border 本身——不用套壳，不用切图，一条属性搞定。

渐进增强的策略很简单：先写正常边框，然后 @supports 里面补 border-shape。你的页面在 Chrome 149+ 用户眼里，就是完整的气泡框。

动手试试看，从一个气泡提示框开始，看能省掉多少 DOM 和 CSS。