css border-width属性设置边框宽度

border-width介绍

border-width属性设置一个元素的四个边框的宽度。在CSS初学者阶段，我们都是建议采用像素做单位。

border-width属性可以有一到四个值。

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

CSS border-width属性值

css border-width属性取值如下表：

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

在WEB网站开发中，一般建议使用px像素作为border-width的单位，例如：border-width:1px；表示四个边框的宽度为1个像素。

border-width 实例

设置p元素四个边框的宽度：

<!DOCTYPE html>
<html>
<head>
<title>http://www.manongjc.com/article/1198.html</title>
<style>
p.one{
   border-style:solid;
   border-width:5px;
}
p.two{
   border-style:solid;
   border-width:medium;
}
p.three{
   border-style:solid;
   border-width:1px;
}
</style>
</head>

<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>

</html>

在线运行