如何用CSS绘制曲线边框？基于.curve::after伪元素实现

架构老林

2026-6-18

仅用CSS实现曲线边框（通过伪元素）

当然可行，你可以利用CSS伪元素的定位、border-radius属性来模拟所需的曲线边框效果，以下是适配你提供的HTML结构的实现方案：

基础HTML结构（保持你的代码）

<ul>
  <li class="curve"></li>
</ul>

CSS实现代码（以右下角内凹曲线为例）

/* 重置ul默认样式 */
ul {
  margin: 30px;
  padding: 0;
}

/* 父元素li的基础样式 */
.curve {
  position: relative;
  width: 220px;
  height: 140px;
  border: 2px solid #333;
  /* 先移除右下角的圆角，留给伪元素处理曲线 */
  border-bottom-right-radius: 0;
  background-color: #fff;
  overflow: hidden; /* 避免伪元素超出容器范围 */
}

/* 伪元素实现曲线边框 */
.curve::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  /* 用圆形的左上部分模拟内凹曲线 */
  width: 60px; /* 控制曲线的弧度大小 */
  height: 60px;
  border-left: 2px solid #333;
  border-top: 2px solid #333;
  border-top-left-radius: 100%;
  background-color: #fff; /* 用背景色覆盖原边框的角落，实现内凹效果 */
  /* 调整位置让曲线和原边框完美衔接 */
  transform: translate(50%, 50%);
}

效果调整说明

如果需要外凸曲线，只需修改伪元素的样式：

.curve {
  overflow: visible; /* 允许伪元素超出容器 */
}
.curve::after {
  bottom: -2px;
  right: -2px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  border-top-left-radius: 100%;
  transform: none;
}