如何仅使用纯CSS实现div元素的内border-radius（内圆角）效果？

以下两种方案均不需要新增任何HTML元素，可直接在你现有类名下修改：

方案1：内阴影模拟边框（最简实现） #

直接移除原有border属性，改用inset内投影模拟边框，内投影的边界会自动继承元素的border-radius，天然实现内侧圆角效果：

.border {
  width: 350px;
  height: 200px;
  border-radius: 8px;
  background-color: #f3f3f3;
  /* 四个参数分别为：水平偏移、垂直偏移、模糊半径、扩散半径（等于你需要的边框宽度），最后是边框颜色 */
  box-shadow: inset 0 0 0 50px grey;
  /* 若有内部内容，添加与边框宽度一致的内边距避免内容被阴影遮挡 */
  padding: 50px;
  box-sizing: border-box;
}

适用场景：普通纯色边框需求，代码量最小，兼容性覆盖所有主流浏览器。

方案2：伪元素模拟边框（高自定义度） #

如果需要边框支持渐变、图案等复杂样式，可以用CSS伪元素实现，不需要新增HTML节点：

.border {
  width: 350px;
  height: 200px;
  border-radius: 8px;
  background-color: #f3f3f3;
  position: relative;
  overflow: hidden;
  /* 若有内部内容，添加与边框宽度一致的内边距 */
  padding: 50px;
  box-sizing: border-box;
}

.border::before {
  content: "";
  position: absolute;
  /* 偏移值取负的边框宽度 */
  top: -50px;
  left: -50px;
  /* 宽高计算为父元素宽高加2倍边框宽度 */
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  background-color: grey;
  z-index: -1;
}

适用场景：需要对边框做渐变、纹理、动画等自定义效果的场景。

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