如何用单个纯CSS容器实现与顶部边框一致的内部圆角下边框？

可以仅用一个容器配合伪元素实现需求，以下是修改后的代码及问题解决说明：

修改后的CSS代码 #

.container {
  width: 100px;
  height: 300px;
  border: 1px solid lightblue;
  border-radius: 10px;
  background-color: white;
  position: relative;
  overflow: hidden; /* 可选，优化圆角区域显示 */
}

.container::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 20px;
  background-color: cornflowerblue;
  border-bottom: 1px solid lightblue;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

问题解决说明 #

• 消除头部与容器边框的白边：将伪元素的top、left、right设为-1px，让伪元素完全覆盖容器的上边框区域，填补原本的间隙。
• 实现头部下边框：给伪元素添加border-bottom属性，使用和容器边框一致的颜色，形成头部与下方区域的分隔线。
• 可选优化：容器添加overflow: hidden，可以避免伪元素边缘在容器圆角处出现细微溢出，让整体样式更规整。

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