如何用CSS让带圆角的div顶部边框在指定区域中断以放置SVG？

DevOps 小满

2026-7-25

实现顶部边框中断并放置SVG的简洁方案

可以通过伪元素模拟分段顶部边框的方式实现，既保留原div的border-radius设置，又能让顶部边框在SVG位置自然中断，代码简洁易维护：

实现思路

保留原div的左侧红色边框和圆角设置，移除顶部边框；
用::before和::after两个伪元素分别模拟顶部边框的左右两段，对应设置圆角；
将SVG绝对定位在div顶部中间，刚好填补两段边框的空隙，视觉上形成边框中断的效果。

代码示例

<div class="border-box">
  <svg class="top-svg" width="60" height="20" viewBox="0 0 60 20">
    <!-- 替换为你的SVG内容 -->
    <circle cx="30" cy="10" r="8" fill="#fff" stroke="#333" stroke-width="2"/>
  </svg>
  <p>示例内容区域</p>
</div>

.border-box {
  position: relative;
  width: 300px;
  height: 200px;
  border-left: 2px solid red;
  border-radius: 16px 4px 10px 4px;
  padding: 20px;
  box-sizing: border-box;
}

/* 顶部左侧边框段 */
.border-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(50% - 35px); /* 50%减去SVG半宽加空隙 */
  height: 2px;
  background-color: red;
  border-top-left-radius: 16px;
}

/* 顶部右侧边框段 */
.border-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(50% - 35px);
  height: 2px;
  background-color: red;
  border-top-right-radius: 4px;
}

.top-svg {
  position: absolute;
  top: -10px; /* 调整数值让SVG与边框自然衔接 */
  left: 50%;
  transform: translateX(-50%);
}