如何通过css设置元素边框厚度border-width

设置边框厚度需使用border-width属性，可统一或单独设定四边宽度，常用像素值如5px；支持上右下左顺时针写法，如2px 4px 6px 8px；也可简写为上下、左右或上、左右、下三种格式；若仅设置单边，可用border-top-width等属性；注意border-width必须配合border-style使用，否则边框不显示，推荐与border-color一并设置，或直接使用border简写属性如2px solid #000。

通过CSS设置元素边框厚度，使用 border-width 属性即可。它可以单独设置四条边的宽度，也可以统一设置。

1. 使用 border-width 设置边框厚度

border-width 接受长度值（如 px、em）或关键词（如 thin、medium、thick）。不推荐使用关键词，因为不同浏览器显示可能不一致。

• border-width: 5px; — 四条边均为5px
• border-width: 2px 4px 6px 8px; — 上右下左（顺时针）
• border-width: 3px 6px; — 上下为3px，左右为6px
• border-width: 1px 2px 3px; — 上=1px，左右=2px，下=3px

2. 分别设置单一边框宽度

如果只想修改某一条边，可以使用以下属性：

百度·度咔剪辑

度咔剪辑，百度旗下独立视频剪辑App

3

查看详情

• border-top-width: 10px;
• border-right-width: 5px;
• border-bottom-width: 3px;
• border-left-width: 7px;

3. 结合 border-style 和 border-color 使用

border-width 单独设置无效，必须配合边框样式（border-style）使用，否则边框不会显示。

立即学习“前端免费学习笔记（深入）”；

div {
  border-width: 2px;
  border-style: solid;
  border-color: #000;
}

div {
  border: 2px solid #000;
}

基本上就这些。只要记住设置宽度前要先定义样式，就能正常显示边框了。

以上就是如何通过css设置元素边框厚度border-width的详细内容，更多请关注php中文网其它相关文章！