如何在CSS中仅为容器的特定角落设置边框？

下面分享两种实用的实现方式，都能轻松达到你要的角落小段边框效果：

方法一：CSS伪元素实现（灵活易控） #

用伪元素模拟角落的边框段，能精准调整每段的长度、粗细和颜色，适配各种场景。

HTML结构 #

<div class="summary-container">
  <p>这里是摘要内容...</p>
</div>

CSS样式 #

.summary-container {
  position: relative;
  padding: 16px;
  background: #fff; /* 容器背景色，可根据需求修改 */
}

/* 左上角水平边框段 */
.summary-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px; /* 水平段长度 */
  height: 2px; /* 边框粗细 */
  background: #333; /* 边框颜色 */
}

/* 左上角垂直边框段 */
.summary-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px; /* 边框粗细 */
  height: 30px; /* 垂直段长度 */
  background: #333; /* 边框颜色 */
}

/* 如果需要添加右上角的边框段，复制以下代码 */
/* .summary-container .corner-right-top::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 2px;
  background: #333;
}
.summary-container .corner-right-top::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 30px;
  background: #333;
} */

方法二：背景渐变实现（无额外元素） #

直接用CSS线性渐变在容器背景上绘制角落边框段，无需额外添加伪元素，代码更简洁。

CSS样式 #

.summary-container {
  padding: 16px;
  background: 
    /* 左上角水平段 */
    linear-gradient(#333, #333) 0 0 / 30px 2px no-repeat,
    /* 左上角垂直段 */
    linear-gradient(#333, #333) 0 0 / 2px 30px no-repeat,
    /* 右上角水平段 */
    linear-gradient(#333, #333) 100% 0 / 30px 2px no-repeat,
    /* 右上角垂直段 */
    linear-gradient(#333, #333) 100% 0 / 2px 30px no-repeat;
  /* 如需添加左下角、右下角，继续补充对应的渐变规则即可 */
}

你可以根据自己的需求调整颜色、长度和粗细，两种方法都能完美实现图中的效果。

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