border-right-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CSS 属性 border-right-width 用于设置元素右边框的宽度。
尝试一下
border-right-width: thick;
border-right-width: 2em;
border-right-width: 4px;
border-right-width: 2ex;
border-right-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: palegreen;
color: #000;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
语法
css
/* 关键字值 */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;
/* <length> 值 */
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;
/* 全局关键字 */
border-right-width: inherit;
border-right-width: initial;
border-right-width: revert;
border-right-width: revert-layer;
border-right-width: unset;
值
<line-width>-
定义边框的宽度，明确的非负
<length>值或者是关键字。如果它是关键字，则必须是以下值之一：thinmediumthick
备注：因为规范没有定义每个关键字表示的确切宽度，所以使用其中的某个关键字所得到的精确结果是特定于实现的。不过，它们通常遵循 thin ≤ medium ≤ thick 的模式，且这些值在单独的文档中是固定不变的。
形式定义
| 初始值 | medium |
|---|---|
| 适用元素 | 所有元素. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| 计算值 | 绝对长度；或如果 border-right-style 的值为 none 或 hidden，则为 0 |
| 动画类型 | a CSS data type are interpolated as real, floating-point numbers.">length |
形式语法
border-right-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
示例
边框宽度对比
HTML
html
<div>元素 1</div>
<div>元素 2</div>
CSS
css
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-right-width: thick;
}
div:nth-child(2) {
border-right-width: 2em;
}
结果
规范
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
浏览器兼容性
Loading…
参见
- 其他与 border-width 相关的 CSS 属性：
border-bottom-width、border-left-width、border-top-width和border-width。 - 其他与 border-right 相关的 CSS 属性：
border、border-right、border-right-style和border-right-color。