border-width

border-width 属性可以设置盒子模型的边框宽度。它是border-top-width, border-right-width, border-bottom-width,和 border-left-width的简写;

示例

/* 用法一：明确指定宽度值 */
/* 当给定一个宽度时，该宽度作用于选定元素的所有边框*/
border-width: 5px;

/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;

/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;

/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 （即按顺时针依次作用） */
border-width: 1px 2em 0 4rem;

/* 用法二：使用全局关键字 */
/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
border-width: inherit;

/* 用法三：使用作用于 border-width 的关键字*/
border-width: thin;
border-width: medium;
border-width: thick;

浏览器支持

浏览器都支持 border-width

语法

border-width : <width> | thin | medium | thick

设置或检索对象的边框宽度。

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• 如果只提供一个，将用于全部的四边。
• 如果提供两个，第一个用于上、下，第二个用于左、右。
• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
• 如果border-style设置为none或hidden，border-width的使用值将为0。
• 对应的脚本特性为 borderWidth 。

取值

• <width> ：用长度值来定义边框的厚度。不允许负值。请看 <width> 。
• thin ：定义默认厚度的边框。计算值为3px。
• thick ：定义比默认厚度粗的边框。计算值为5px。

例子

<p id="sval">
   one value: 6px wide border on all 4 sides</p>
<p id="bival">
   two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p id="treval">
   three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p id="fourval">
   four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>

//CSS

#sval {
   border: ridge #ccc;
   border-width: 6px;
}
#bival {
   border: solid red;
   border-width: 2px 10px;
}
#treval {
   border: dotted orange;
   border-width: 0.3em 0 9px;
}
#fourval {
   border: solid lightgreen;
   border-width: thin medium thick 1em;
}
p {
   width: auto;
   margin: 0.25em;
   padding: 0.25em;
}