上查看所有课程
CSS border-width 属性指定元素边框的宽度或厚度。例如：
p {
border-style: solid;
border-width: 8px;
}浏览器输出
这里，border-width 属性将边框宽度设置为 8px。
CSS border-style 语法
border-width 属性的语法如下：
border-width: value;这里，value 指定边框的宽度，可以使用长度单位，如 px、pt、em 等，或者使用预定义值 thin、medium 或 thick。
示例 1：CSS border-width 长度示例
让我们看一个使用长度值的 border-width 属性的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-width</title>
</head>
<body>
<p class="width-6px">border-width: 6px; border-style: solid;</p>
<p class="width-8px">border-width: 8px; border-style: dashed;</p>
<p class="width-10px">border-width: 10px; border-style: dotted;</p>
</body>
</html>p.width-6px {
border-style: solid;
/* sets the border width to 6px */
border-width: 6px;
}
p.width-8px {
border-style: dashed;
/* sets the border width to 8px */
border-width: 8px;
}
p.width-10px {
border-style: dotted;
/* sets the border width to 10px */
border-width: 10px;
}
/* adds 8px padding to all p elements */
p {
padding: 8px;
}浏览器输出
示例 2：CSS border-width 关键字示例
让我们看一个使用关键字的 border-width 属性的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-width</title>
</head>
<body>
<p class="thin">border-width: thin;</p>
<p class="medium">border-width: medium;</p>
<p class="thick">border-width: thick;</p>
</body>
</html>/* styles all p */
p {
padding: 8px;
border-style: solid;
}
p.thin {
/* sets the border width to thin */
border-width: thin;
}
p.medium {
/* sets the border width to medium */
border-style: medium;
}
p.thick {
/* sets the border width to thick */
border-style: thick;
}浏览器输出
CSS border-width 属性作为简写
我们可以使用 border-width 属性来更改边框的一个或所有四个边的宽度。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border-width</title>
</head>
<body>
<p class="one-value">border-width: 6px;</p>
<p class="two-value">border-width: 8px 16px;</p>
<p class="three-value">border-width: 8px 16px 2px;</p>
<p class="four-value">border-width: 8px 16px 20px 24px;</p>
</body>
</html>/* styles all the p elements */
p {
border-style: solid;
padding: 8px;
}
p.one-value {
/* sets all four side width to 6px */
border-width: 6px;
}
p.two-value {
/* sets top/bottom width to 8px, left/right width to 16px */
border-width: 8px 16px;
}
p.three-value {
/* sets top width to 8px, left/right width to 16px, bottom width to 2px */
border-width: 8px 16px 2px;
}
p.four-value {
/* sets the top width to 8px, right width to 16px, bottom width to 20px, left width to 24px */
border-width: 8px 16px 20px 24px;
}浏览器输出
CSS border-width 组成属性
CSS border-top-width 属性
border-top-width 属性仅为元素的顶部边框添加宽度。例如：
p {
border-style: solid;
border-top-width: 8px;
}浏览器输出
CSS border-right-width 属性
border-right-width 属性仅为元素的右边框添加宽度。例如：
p {
border-style: solid;
border-right-width: 8px;
}浏览器输出
CSS border-bottom-width 属性
border-bottom-width 属性仅为元素的底部边框添加宽度。例如：
p {
border-style: solid;
border-bottom-width: 8px;
}浏览器输出
CSS border-left-width 属性
border-left-width 属性仅为元素的左边框添加宽度。例如：
p {
border-style: solid;
border-left-width: 8px;
}浏览器输出
