border-width属性是用于设置一个元素的边框宽度的简写属性。它可以同时设置一个元素的border-top-width，border-right-width，border-bottom-width和border-left-width属性。
border-width属性的值可以是一个，两个，三个或四个。这些值可以是CSS <length>数据类型，或者是3个预定义的CSS边框宽度关键字之一：thin，medium或thick。
如果只为border-width属性设置一个值，那么元素的4个边框都使用该值来设置边框的宽度。
如果为border-width属性设置了两个值，那么第一个值指定元素上下边框的宽度，第二个值指定元素左右边框的宽度。
如果为border-width属性设置了三个值，那么第一个值指定元素上边框的宽度，第二个值指定元素左右边框的宽度，第三个值指定元素下边框的宽度。
如果为border-width属性设置了四个值，那么第一个值指定元素上边框的宽度，第二个值指定元素右边框的宽度，第三个值指定元素下边框的宽度，第四个值指定元素左边框的宽度。
官方语法
border-width: <border-width>{1,4}
/* 其中 */
<border-width> = <length> | thin | medium | thick
参数：
<length>：使用<length>数据类型来指定元素边框的宽度。thin：边框的预定义宽度关键字。medium：边框的预定义宽度关键字。thick：边框的预定义宽度关键字。
border-width属性的初始值是它包含的各个具体边框宽度属性的初始值：
- border-top-width：medium
- border-right-width：medium
- border-left-width：medium
- border-bottom-width：medium
border-width属性可以使用inherit关键字从父元素中继承边框宽度。
在使用3个预定义宽度关键字时要注意，由于规范中并没有明确指出每一个关键字的具体宽度是多少，各个浏览器对于各个关键字的解释有所不同。因此在使用关键字作为边框的宽度时，在各个浏览器中渲染出来的实际边框宽度会有所差异。
应用范围
border-width属性可以应用在所有元素上。
示例代码
下面是border-width属性取值的一些示例代码。
/* border-width: width */
border-width: 5px;
/* 上下 | 左右 */
border-width: 2px 1.5em;
/* 上 | 左右 | 下 */
border-width: 1px 2em 1.5cm;
/* 上 | 右 | 下 | 左 */
border-width: 1px 2em 0 4rem;
border-width: inherit;
在线演示
下面的例子使用border-width属性为元素设置边框宽度。
.element {
border-style: solid;
border-width: 50px 10px 10px 10px;
border-color: #22a7f0;
}
浏览器支持
所有的现代浏览器都支持border-left-width属性，包括Chrome，Firefox，Safari，Opera，IE 以及 Android 和 iOS。
