如何为CSS border-bottom添加圆角边缘？求匹配图示效果的方案

安全阿岳

2026-7-10

实现底部两端圆角的边框效果

直接给元素设置border-bottom加border-radius无法实现你要的效果，因为border-radius是作用于元素的四个边角，而非底部边框线段的两端。下面是两种可行的实现方案：

方案一：伪元素模拟（推荐）

通过::after伪元素生成一个带圆角的矩形，模拟底部边框的效果，灵活性高且兼容性好：

/* 目标元素样式 */
.title {
  position: relative;
  padding-bottom: 12px; /* 给伪元素留出显示空间 */
  font-size: 18px;
}

/* 模拟底部圆角边框 */
.title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 75%; /* 控制边框的宽度，可根据需求调整 */
  height: 4px; /* 边框的厚度 */
  background-color: #2ecc71; /* 边框颜色 */
  border-radius: 4px; /* 圆角半径，和高度一致时是半圆角 */
}

调整width可以控制边框的长度，height控制边框粗细，border-radius控制圆角弧度
如果不需要居中，去掉left:50%和transform，改用left/right属性控制位置

方案二：渐变背景实现

利用背景渐变绘制带圆角的底部边框，无需伪元素：

.title {
  padding-bottom: 12px;
  background: 
    radial-gradient(circle at left bottom, transparent 4px, #2ecc71 4px, #2ecc71 calc(4px + 100%), transparent calc(4px + 100%)),
    radial-gradient(circle at right bottom, transparent 4px, #2ecc71 4px, #2ecc71 calc(4px + 100%), transparent calc(4px + 100%)),
    linear-gradient(#2ecc71, #2ecc71) bottom center / calc(100% - 8px) 4px no-repeat;
}