如何在CSS中设置边框宽度_border-width调整容器边界

CSS中通过border-width属性设置边框宽度，支持像素值和thin、medium、thick关键字；可分别设置上右下左四边宽度，语法为四个值（上右下左）、三个值（上左右下）、两个值（上下左右）、一个值（四边相同）；需配合border-style如solid才能显示边框，推荐使用border简写属性同时定义宽度、样式和颜色，例如：border: 3px solid #000；合理使用可精确控制容器边界并提升代码简洁性。

在CSS中设置边框宽度，主要通过 border-width 属性来控制容器的边界粗细。这个属性可以为元素的四条边分别设置不同的宽度，也可以统一设置。

使用 border-width 设置边框粗细

border-width 支持以下几种赋值方式：

• 具体像素值（如 1px、2px）
• 预定义关键字：thin（细）、medium（中等，默认）、thick（粗）

例如：

div {
  border-width: 2px;
}

这会为 div 元素的四条边都设置 2 像素宽的边框。

分别设置四条边的宽度

你可以单独控制上、右、下、左四个方向的边框宽度，语法如下：

• 四个值：上 右 下 左
• 三个值：上 左右 下
• 两个值：上下 左右
• 一个值：四边相同

示例：

.box {
  border-width: 1px 2px 3px 4px;
}

这表示上边框 1px，右边框 2px，下边框 3px，左边框 4px。

配合 border-style 和 border-color 使用

border-width 单独设置不会显示边框，必须配合 border-style（如 solid、dashed）才能生效。颜色可通过 border-color 设置，或直接使用简写属性。

推荐使用简写形式更高效：

.container {
  border: 3px solid #000;
}

这行代码同时设置了宽度、样式和颜色，等同于分别写 border-width、border-style 和 border-color。

基本上就这些。合理使用 border-width 能精确控制容器边界视觉效果，结合简写属性让代码更简洁。