如何实现带2px边框的内凹圆角（inverted corners）效果？

内凹圆角加边框实现方案 #

你目前用径向渐变实现内凹圆角的逻辑非常简洁，加2px边框可以用以下两种无额外DOM节点的方案实现：

方案1：多层径向渐变叠加（兼容性最好） #

原理是在原有背景层上叠加一层更小的填充渐变，两层渐变的差值就是边框宽度，示例代码如下：

/* 以左上角内凹圆角为例，其余方位参数可根据需求调整 */
.target-element {
  width: 300px;
  height: 200px;
  background: 
    /* 内层填充渐变，比边框渐变的终止位小2px */
    radial-gradient(circle at top left, transparent 4vw, #ffffff 4.1vw, #ffffff calc(4vw + 2px)),
    /* 外层边框渐变，颜色为你需要的边框色 */
    radial-gradient(circle at top left, transparent 4vw, darkblue 4.1vw);
}

如果需要四个角都做内凹圆角，只需要按上述规则新增两组渐变分别对应top left/top right/bottom left/bottom right四个方位即可，把vw单位也可以替换为固定px值，尺寸控制更精准。

方案2：padding+outline配合实现（代码更精简） #

如果你的元素需要全边框覆盖，这个方案代码量更少：

.target-element {
  width: 300px;
  height: 200px;
  background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
  /* 背景仅填充内容区，预留边框位置 */
  background-clip: content-box;
  /* padding值对应边框宽度 */
  padding: 2px;
  /* outline颜色为边框色 */
  outline: 2px solid darkblue;
}

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