css中的border-left-width属性用于单独设置元素左侧边框的宽度，属于边框相关的基础属性之一，它可以配合其他边框属性实现多样化的元素边框样式效果。
border-left-width的基本语法
该属性的语法格式非常简单，直接为属性赋值即可，基本写法如下：
/* 基本语法 */ border-left-width: 取值;
支持的属性值类型
border-left-width支持多种类型的取值，不同取值对应不同的边框宽度效果，具体取值说明如下：
| 取值类型 | 说明 | 示例 |
|---|---|---|
| 长度值 | 使用px、em、rem等单位定义具体宽度，不允许为负值 | 2px、0.5em |
| 关键字 | 支持thin、medium、thick三个预定义关键字，对应不同默认宽度 | thin、medium |
| inherit | 继承父元素的左侧边框宽度设置 | inherit |
使用注意事项
- border-left-width单独使用时，如果元素没有设置左侧边框样式，那么该属性不会生效，因为默认边框样式为none，宽度为0
- 如果要同时设置左侧边框的宽度、样式、颜色，可以使用简写属性
border-left，减少代码量 - 当元素设置了
border-left-width为0时，左侧边框会完全消失，即使设置了边框样式也不会显示
实际代码示例
下面通过几个示例展示不同取值下的border-left-width效果：
示例1：使用长度值设置左侧边框宽度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box1 {
width: 200px;
height: 100px;
border-left-style: solid; /* 先设置左侧边框样式 */
border-left-width: 3px; /* 设置左侧边框宽度为3px */
border-left-color: #ff0000; /* 设置左侧边框颜色为红色 */
}
</style>
</head>
<body>
<div class="box1">左侧边框宽度3px的盒子</div>
</body>
</html>
示例2：使用关键字设置左侧边框宽度
/* 三个关键字对应的默认宽度参考值 */
.thin-border {
border-left-style: solid;
border-left-width: thin; /* 通常对应1px */
}
.medium-border {
border-left-style: solid;
border-left-width: medium; /* 通常对应3px，是默认值 */
}
.thick-border {
border-left-style: solid;
border-left-width: thick; /* 通常对应5px */
}
示例3：使用border-left简写属性
/* 简写属性同时设置宽度、样式、颜色，顺序可以调整 */
.short-border {
border-left: 4px dashed #00ff00;
}
常见问题解答
问：为什么我设置了border-left-width但是看不到左侧边框？
答：大概率是还没有设置border-left-style属性，默认边框样式为none，此时即使设置了宽度也不会显示边框，需要先设置样式为solid、dashed等有效值。
问：border-left-width可以设置为百分比吗？
答：不可以，该属性不支持百分比取值，只能使用长度单位、预定义关键字或者inherit。
注意：不同浏览器对thin、medium、thick三个关键字对应的具体宽度可能有细微差异，如果需要统一的边框宽度，建议使用具体的长度值。
cssborder-left-width边框属性前端样式修改时间：2026-07-23 15:39:45