1. 首页
  2. CSS 菜鸟教程
  3. CSS - border-width 属性

CSS - border-width 属性

border-width 是一个简写属性，用于设置元素的四个边框边的宽度。

可能的值

  • length − 任何长度单位。此属性的长度单位不能为负数。
  • thin − 比设置为中等的边框更薄的边框。
  • medium − 比设置为薄的边框厚的边框厚，比设置为厚的边框更薄的边框。
  • thick − 比设置为中等的边框更厚的边框。

适用于

所有 HTML 元素。

DOM 语法

object.style.borderWidth = "2px";
始终在 border-width 属性之前声明 border-style 属性。

例

以下是显示所有 border-width 的示例 -

<html>
<head>
</head>

	 	<body>
	 	 	 <p style = "border-width:4px; border-style:solid;">
	 	 	 	 	This is a solid border whose width is 4px.
	 	 	 </p>

	 	 	 <p style = "border-width:4pt; border-style:solid;">
	 	 	 	 	This is a solid border whose width is 4pt.
	 	 	 </p>

	 	 	 <p style = "border-width:thin; border-style:solid;">
	 	 	 	 	This is a solid border whose width is thin.
	 	 	 </p>

	 	 	 <p style = "border-width:medium; border-style:solid;">
	 	 	 	 	This is a solid border whose width is medium;
	 	 	 </p>

	 	 	 <p style = "border-width:thick; border-style:solid;">
	 	 	 	 	This is a solid border whose width is thick.
	 	 	 </p>

	 	 	 <p style = "border-bottom-width:4px;border-top-width:10px;
	 	 	 	 	border-left-width: 2px;border-right-width:15px;border-style:solid;">
	 	 	 	 	This is a a border with four different width.
	 	 	 </p>

	 	</body>
</html>

border-width - 简写示例

border-width 属性可以有四个值、三个值、两个值或一个值，如以下示例所示：

<html>
	 	<head>
	 	 	 <style type = "text/css">
	 	 	 	 	p.example1 {
	 	 	 	 	 	 border-width:4px 3px 2px 1px;
	 	 	 	 	 	 border-style:solid;
	 	 	 	 	}
	 	 	 	 	p.example2 {
	 	 	 	 	 	border-width:4px 3px 2px ;
	 	 	 	 	 	border-style:solid;
	 	 	 	 	}
	 	 	 	 	p.example3 {
	 	 	 	 	 	border-width:4px 3px;
	 	 	 	 	 	border-style:solid;
	 	 	 	 	}
	 	 	 	 	p.example4 {
	 	 	 	 	 	border-width:4px;
	 	 	 	 	 	border-style:solid;
	 	 	 	 	}
	 	 	 </style>
	 	</head>

	 	<body>
	 	 	 <p class = "example1">
	 	 	 	 	<i>border-width</i> with four different values.
	 	 	 </p>
	 	 	 <p class = "example2">
	 	 	 	 	<i>border-width</i> with three different values.
	 	 	 </p>
	 	 	 <p class = "example3">
	 	 	 	 	<i>border-width</i> with two different values.
	 	 	 </p>
	 	 	 <p class = "example4">
	 	 	 	 	<i>border-width</i> with one value.
	 	 	 </p>
	 	</body>
</html>
<< CSS - border-top-width 属性 CSS - page-break-after 属性 >>