如何用CSS为相邻区块添加带特殊圆角的共用边框效果

核心思路 #

要实现两个相邻区块共用边框+异形圆角，关键是让区块紧密贴合消除间隙，分别控制各自的圆角方向，同时避免边框重叠出现双线。

具体实现（CSS示例） #

先搭好基础HTML结构：

<div class="block-group">
  <div class="block block-left">关于</div>
  <div class="block block-right">其他内容</div>
</div>

再写对应的CSS样式：

.block-group {
  display: flex; /* 让两个区块横向并排 */
}

.block {
  border: 2px solid #000; /* 统一边框样式，颜色粗细可按需调整 */
  padding: 1rem;
  flex: 1; /* 让两个区块均分宽度，也可以设固定宽度 */
}

/* 左侧区块：只保留右上的向上弯圆角，去掉右侧边框 */
.block-left {
  border-radius: 0 20px 0 0; /* 圆角顺序：左上、右上、右下、左下 */
  border-right: none;
  margin-right: -2px; /* 负margin抵消边框宽度，让两个区块贴紧无间隙 */
}

/* 右侧区块：只保留左下的向下弯圆角，去掉左侧边框 */
.block-right {
  border-radius: 0 0 20px 0;
  border-left: none;
}

关键细节 #

• 用flex布局确保两个区块横向无缝排列，避免默认的换行或间隙
• 去掉相邻侧的边框，再通过负margin让两个区块的边框完全重合，实现「共用边框」的视觉效果
• 圆角设置精准对应需求：左侧只留右上圆角，右侧只留左下圆角，其余角设为直角，就能匹配你要的弯曲效果

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