如何为带内凹圆角的CSS mask结构添加精准边框？

因为mask属性会直接裁切整个元素（包括边框），所以直接加border会被裁切失效。最精准的方案是用双层元素叠加：外层做边框，内层放内容，两者应用完全相同的mask规则，确保形状完全匹配。

具体实现步骤 #

• 保留原父容器，在内部新增两个子元素：一个负责渲染边框，一个承载实际内容
• 将形状相关的CSS变量统一放在父容器，方便后续调整维护
• 边框层仅设置边框样式和mask，不添加背景；内容层设置背景、内边距（避开边框）和完全一致的mask

完整代码示例 #

HTML

<div class="parent">
  <!-- 边框层 -->
  <div class="border-layer"></div>
  <!-- 内容层 -->
  <div class="content-layer">
    <h1 class="f">features</h1>
    <div class="inner">
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
    </div>
  </div>
  <div class="plus"></div>
</div>

CSS

body {
  background-color: lightblue;
}

.parent {
  position: relative;
  width: 450px;
  /* 统一管理形状变量 */
  --r: 20px; /* 圆角半径 */
  --s: 30px; /* 内凹曲线大小 */
  --x: 15px; /* 水平偏移 */
  --y: 10px; /* 垂直偏移 */
  --border-width: 2px; /* 边框宽度 */
}

/* 边框层：仅负责显示符合形状的边框 */
.border-layer {
  position: absolute;
  inset: 0;
  border: var(--border-width) solid #00000038;
  border-radius: var(--r);
  /* 复用原mask规则 */
  --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
  --_d: (var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
}

/* 内容层：承载实际内容，形状与边框层完全匹配 */
.content-layer {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5;
  background: white;
  border-radius: var(--r);
  padding: var(--border-width); /* 避开边框，防止内容贴边 */
  box-sizing: border-box; /* 确保padding不影响整体宽度 */
  /* 完全相同的mask规则，保证形状一致 */
  --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
  --_d: (var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
}

.plus {
  --c: #59DF9B;
  position: absolute;
  bottom: 0;
  right: 6px;
  height: 40px;
  aspect-ratio: 1;
  box-shadow: 0 0 0 35px inset var(--c);
  border-image: conic-gradient(var(--c) 0 0) 50%/calc(50% - 15px);
  clip-path: circle();
}

关键说明 #

• 边框层通过绝对定位占满父容器，mask裁切后仅保留符合形状的边框部分
• 内容层设置与边框宽度一致的内边距，确保内容不会被边框遮挡
• 所有形状变量统一管理，修改时只需调整父容器的变量即可，无需重复修改多个元素

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