边框底部样式 | border-bottom-style

border-bottom-style

border-bottom-style CSS属性设置元素的底部的线条样式border。

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

/* Global values */
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-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-bottom-style属性被指定为从border-style属性中选择的单个关键字。

正式语法

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

示例

这是一个表格，显示了所有border-bottom-style的值

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: 3px;
  background-color: #52E385;
}
tr, td {
  padding: 3px;
}

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

结果

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-bottom-style' in that specification.	Candidate Recommendation	No significant change.
CSS Level 2 (Revision 1)The definition of 'border-bottom-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)	(Yes)1	7.0	(Yes)	(Yes)

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

另见

其他样式相关的边框属性：border-left-style，border-right-style，border-top-style，和border-style。

另外底部边框相关的属性：border-bottom，border-bottom-color，和border-bottom-width。