CSS文本边框与border-radius实现：如何让边框端点向上？

首先得明确：你用单纯的border-top + border-radius确实没法实现端点向上的效果——因为CSS里的border-radius是用来定义元素自身的圆角，当你只给元素加border-top时，圆角是沿着元素的边角向下弯曲的（毕竟元素的主体在边框下方），而且负的border-radius是不合法的，所以你之前试的方法自然没用。

不过这个效果完全可以实现，给你两种简单的方案：

方案一：伪元素 + 径向渐变模拟 #

这种方法用背景渐变组合出向上的圆弧端点，代码清晰且兼容性好：

.pagebreaker {
  padding: 10px;
  margin-bottom: -5px;
  position: relative;
  /* 移除原来的border-top相关样式 */
}

.pagebreaker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  /* 用径向渐变做左右向上的圆弧，中间用直线填充 */
  background: 
    radial-gradient(circle at left top, transparent 33px, #f6d241 33px, #f6d241),
    radial-gradient(circle at right top, transparent 33px, #f6d241 33px, #f6d241),
    linear-gradient(to right, #f6d241, #f6d241);
  background-size: 35px 100%, 35px 100%, calc(100% - 70px) 100%;
  background-repeat: no-repeat;
  background-position: left top, right top, center top;
}

原理是：左右两端用径向渐变画出半圆弧（透明部分让圆弧“向上凸”），中间用线性渐变填充直线段，三者组合起来就是你要的效果。

方案二：伪元素 + 定位（更直观） #

如果你觉得渐变有点绕，也可以用伪元素做一个带圆角的矩形，向上移动后只露出底部边框：

.pagebreaker {
  padding: 10px;
  margin-bottom: -5px;
  position: relative;
  overflow: hidden; /* 防止伪元素超出容器 */
}

.pagebreaker::before {
  content: "";
  position: absolute;
  top: -31px; /* 调整这个值让圆弧刚好露出顶部 */
  left: 0;
  right: 0;
  height: 35px;
  border-bottom: 4px solid #f6d241;
  border-radius: 0 0 35px 35px;
}

这里的思路是：给伪元素加底部边框和底部圆角，然后把它向上移动，只露出底部的边框部分——这样看起来边框的端点就是向上弯的了。

两种方案都能达到你想要的效果，你可以根据自己的需求选一种~

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