border-width

border-width属性是用于设置一个元素的边框宽度的简写属性。它可以同时设置一个元素的，，和属性。

border-width 属性的值可以是一个，两个，三个或四个。这些值可以是CSS 数据类型，或者是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> ：使用数据类型来指定元素边框的宽度。 thin ：边框的预定义宽度关键字。 medium ：边框的预定义宽度关键字。 thick ：边框的预定义宽度关键字。

border-width 属性的初始值是它包含的各个具体边框宽度属性的初始值：

：medium ：medium ：medium ：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 属性为元素设置边框宽度。

边框宽度为：50px 10px 10px 10px

.element {
    border-style: solid;
    border-width: 50px 10px 10px 10px;
    border-color: #22a7f0;
}                              
                            

浏览器支持

所有的现代浏览器都支持 border-left-width 属性，包括Chrome，Firefox，Safari，Opera，IE 以及 Android 和 iOS。

查看更多关于border-width的详细内容...