如何仅用CSS实现角落带圆形的边框效果？

完全可以只用CSS实现这种效果，下面给两种实用的实现方案：

方案一：伪元素+定位（灵活易调整） #

这种方法通过创建圆形伪元素覆盖在容器边框的角落，实现需求效果，适配性强。

HTML结构 #

<div class="corner-box">
  <span></span>
</div>

CSS代码 #

.corner-box {
  width: 300px;
  height: 200px;
  position: relative;
  border: 2px solid #222;
  margin: 40px auto;
  background: #fff;
}

/* 四个角落的圆形元素 */
.corner-box::before,
.corner-box::after,
.corner-box span::before,
.corner-box span::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #222;
  border-radius: 50%;
  background: #fff; /* 用背景色覆盖边框角落，露出完整圆形 */
}

/* 左上角 */
.corner-box::before {
  top: -12px;
  left: -12px;
}
/* 右上角 */
.corner-box::after {
  top: -12px;
  right: -12px;
}
/* 左下角 */
.corner-box span::before {
  bottom: -12px;
  left: -12px;
}
/* 右下角 */
.corner-box span::after {
  bottom: -12px;
  right: -12px;
}

方案二：多层box-shadow实现（无额外HTML元素） #

如果不想加额外的HTML标签，可以用多层阴影模拟边框和角落圆形，适合固定尺寸的容器。

HTML结构 #

<div class="corner-box"></div>

CSS代码 #

.corner-box {
  width: 300px;
  height: 200px;
  margin: 40px auto;
  position: relative;
  background: #fff;
}

.corner-box::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #222;
}

.corner-box::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  /* 用多层阴影创建四个角落的圆形 */
  box-shadow: 
    -10px -10px 0 8px #fff,
    -10px -10px 0 10px #222,
    308px -10px 0 8px #fff,
    308px -10px 0 10px #222,
    -10px 208px 0 8px #fff,
    -10px 208px 0 10px #222,
    308px 208px 0 8px #fff,
    308px 208px 0 10px #222;
  pointer-events: none; /* 避免阴影干扰交互 */
}

你可以根据实际需求调整圆形大小、边框颜色、容器尺寸等参数，两种方案都能实现图中的效果。

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