如何在CSS中创建如图所示的特殊圆角边框？

你要实现的是元素角落处的局部圆角边框（即仅在元素左下侧显示带圆角的边框效果），可以通过伪元素结合CSS定位与边框属性实现，完整代码如下：

基础HTML结构 #

<div class="parent">
  <div class="child">内容区域</div>
</div>

CSS样式代码 #

.parent {
  position: relative; /* 让伪元素基于父元素定位 */
  padding: 10px;
}

.child::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: -1px;
  bottom: -1px; /* 定位到父元素左下角 */
  background: transparent;
  border-bottom-left-radius: 7px;
  border-left: 0.5px solid #808080;
  border-bottom: 0.5px solid #808080;
}

关键逻辑说明 #

• 父元素设置position: relative，确保伪元素的绝对定位参考父元素的边角
• 利用::before伪元素生成小方块，仅为其左侧和底部设置边框
• 通过border-bottom-left-radius控制左下角的圆角弧度，数值越大圆角越圆润
• 调整left和bottom的像素值，让伪元素刚好对齐目标角落的位置

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