尝试一下 border-width: thick; border-width: 1em; border-width: 4px 1.25em; border-width: 2ex 1.25ex 0.5ex; border-width: 0 4px 8px 12px; This is a box with a border around it. #examp……
尝试一下
border-width: thick;
border-width: 1em;
border-width: 4px 1.25em;
border-width: 2ex 1.25ex 0.5ex;
border-width: 0 4px 8px 12px;
This is a box with a border around it.
#example-element {
background-color: palegreen;
color: #000;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
构成属性
此属性是以下 CSS 属性的简写：
border-bottom-width
border-left-width
border-right-width
border-top-width
语法
css/* 关键字值 */
border-width: thin;
border-width: medium;
border-width: thick;
/*
border-width: 4px;
border-width: 1.2rem;
/* 顶部和底部 | 左侧和右侧 */
border-width: 2px 1.5em;
/* 顶部 | 左侧和右侧 | 底部 */
border-width: 1px 2em 1.5cm;
/* 顶部 | 右侧 | 底部 | 左侧 */
border-width: 1px 2em 0 4rem;
/* 全局值 */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;
border-width 属性可以通过一个、两个、三个或四个值来指定。
当指定一个值时，该宽度将应用于四条边。
当指定两个值时，第一个宽度应用于顶部和底部，第二个宽度应用于左侧和右侧。
当指定三个值时，第一个宽度应用于顶部, 第二个宽度应用于左侧和右侧, 第三个宽度应用于底部.
当指定四个值时，这些宽度按照顶部、右侧、底部和左侧的顺序（顺时针）进行应用。
值
定义边框的宽度，可以是明确的非负数
thin
medium
thick
备注：
由于规范中没有明确定义每个关键字所表示的确切厚度，因此使用其中一个关键字的确切结果取决于具体实现。尽管如此，它们始终遵循 thin ≤ medium ≤ thick 这一模式，并且这些值在同一文档中是恒定的。
形式定义
初始值该简写所对应的每个属性：border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: medium适用元素所有元素. It also applies to ::first-letter.是否是继承属性否计算值该简写所对应的每个属性：border-bottom-width: 绝对长度；或如果 border-bottom-style 的值是 none 或 hidden，则为 0border-left-width: 绝对长度；或如果 border-left-style 的值为 none 或 hidden，则为 0border-right-width: 绝对长度；或如果 border-right-style 的值为 none 或 hidden，则为 0border-top-width: 绝对长度；或如果 border-top-style 的值为 none 或 hidden，则为 0动画类型该简写所对应的每个属性：border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length
形式语法
border-width =
Sources: CSS Backgrounds and Borders Module Level 3
示例
值与 length 的混合
HTML
html
一个值：四边均有 6px 的边框宽度。
两个不同的值：顶部和底部边框宽 2px，右侧和左侧边框宽 10px。
三个不同的值：顶部为 0.3em，底部为 9px，右侧和左侧的宽度为零。
四个不同的值：顶部为“thin”，右侧为“medium”，底部为“thick”，左侧为 1em。
CSS
css#one-value {
border: ridge #ccc;
border-width: 6px;
}
#two-values {
border: solid red;
border-width: 2px 10px;
}
#three-values {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#four-values {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
结果
规范
Specification
CSS Backgrounds and Borders Module Level 3# border-width
浏览器兼容性
Loading…
参见
与边框相关的简写属性：border、border-style、border-color
与边框宽度相关的属性：border-bottom-width、border-left-width、border-right-width、border-top-width
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年7月15日 by MDN contributors.
View this page on GitHub • Report a problem with this content