如何给CSS mask实现的顶部弧形矩形添加顶部边框？

问题原因 #

使用CSS mask 实现形状时，元素的边框属于盒模型的一部分，会被mask一同裁剪，因此无法单独保留顶部边框。需要将形状与边框分开处理，避免裁剪影响边框显示。

具体实现方法 #

方法一：clip-path + 伪元素（适合自定义弧形） #

通过clip-path定义顶部弧形的形状，分别给元素本身（填充背景）和伪元素（模拟边框）应用相同的裁剪路径，实现带边框的效果。

示例代码：

.arc-box {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #8B4513; /* 棕色背景 */
  /* 定义顶部弧形路径：可调整数值改变弧度大小 */
  clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%);
}

.arc-box::before {
  content: "";
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  border: 2px solid #333; /* 边框样式 */
  clip-path: inherit; /* 继承父元素的裁剪路径 */
  pointer-events: none; /* 不干扰元素交互 */
}

方法二：SVG背景（精准控制弧形） #

如果需要更精细的弧形曲线，用SVG定义形状和边框是更灵活的选择，可直接作为元素背景使用：

示例代码：

.arc-box {
  width: 300px;
  height: 200px;
  /* 内联SVG作为背景，可调整path中的数值修改弧度、颜色、边框宽度 */
  background: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><path d="M0,40 Q150,0 300,40 L300,200 L0,200 Z" fill="none" stroke="#333" stroke-width="2"/><path d="M0,40 Q150,0 300,40 L300,200 L0,200 Z" fill="%238B4513"/></svg>') no-repeat center / cover;
}

方法三：border-radius（顶部边角弧形场景） #

如果需求仅为顶部左右两个角是弧形，直接用border-radius即可，无需复杂的裁剪：

.arc-box {
  width: 300px;
  height: 200px;
  background-color: #8B4513;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  border: 2px solid #333;
  /* 若仅需要顶部边框，可移除底部边框 */
  border-bottom: none;
}

根据你的目标效果图选择对应方法，方法一、二适用于顶部整体弧形的场景，方法三适用于顶部边角弧形的场景。

内容的提问来源于stack exchange，提问作者Dinesh s