右边框样式 | border-right-style

border-right-style

border-right-style CSS属性设置的一个元素的右边的线条样式border。

/* Keyword values */
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

/* Global values */
border-right-style: inherit;
border-right-style: initial;
border-right-style: unset;

注意：规范没有定义不同风格的边界如何连接角落。

初始值	none
适用元素	all elements. It also applies to ::first-letter.
是否是继承属性	no
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

border-right-style属性被指定为从border-style属性中选择的单个关键字。

正式语法

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

示例

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

CSS

/* Define look of the table */
table {
  border-width: 2px;
  background-color: #52E385;
}
tr, td {
  padding: 3px;
}

/* border-right-style example classes */
.b1 {border-right-style: none;}
.b2 {border-right-style: hidden;}
.b3 {border-right-style: dotted;}
.b4 {border-right-style: dashed;}
.b5 {border-right-style: solid;}
.b6 {border-right-style: double;}
.b7 {border-right-style: groove;}
.b8 {border-right-style: ridge;}
.b9 {border-right-style: inset;}
.b10 {border-right-style: outset;}

结果

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-right-style' in that specification.	Candidate Recommendation	No significant change.
CSS Level 2 (Revision 1)The definition of 'border-right-style' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.01	5.5	9.2	1.0

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	141	7.0	(Yes)	(Yes)

在Firefox 50之前，圆角（带border-radius）边框样式总是呈现为好像border-right-style被设置为solid一样。这已在Firefox 50中修复。