border-right

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

border-right CSS 简写属性用于设置元素右边框的所有属性。

尝试一下

与所有简写属性一样,border-right 始终设置它可以设置的所有属性的值,即使这些属性未被明确指定。它将那些未指定的值设置为默认值。请看下面的代码:

css
border-right-style: dotted;
border-right: thick green;

实际上,它和这个是一样的:

css
border-right-style: dotted;
border-right: none thick green;

border-right 之前给定的 border-right-style 的值将被忽略。由于 border-right-style 的默认值是 none,如果没有指定 border-style 部分,则不会显示边框。

组成属性

该属性为以下 CSS 属性的简写:

语法

css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;

/* 全局值 */
border-right: inherit;
border-right: initial;
border-right: revert;
border-right: revert-layer;
border-right: unset;

简写属性的三个值可以任意顺序指定,也可以省略其中的一个或两个值。

形式定义

初始值该简写所对应的每个属性:
适用元素所有元素. It also applies to ::first-letter.
是否是继承属性
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:

形式语法

border-right = 
<line-width> ||
<line-style> ||
<color>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

示例

应用右侧边框

HTML

html
<div>这个盒子在右侧有一个边框。</div>

CSS

css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

结果

规范

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-right

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见