border-bottom-style

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

border-bottom-style CSS property sets the line style of an element's bottom border .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

注意： The specification doesn't define how borders of different styles connect in the corners.

句法

/* 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;

border-bottom-style property is specified as a single keyword chosen from those available for the border-style 特性。

形式定义

初始值	`none`
适用于	所有元素。它还适用于 `::first-letter` .
继承	no
计算值	如指定
动画类型	discrete

形式句法

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

范例

Demonstrating all border styles

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;}

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-bottom-style' in that specification.	候选推荐	No significant change.
CSS Level 2 (Revision 1) The definition of 'border-bottom-style' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-bottom-style`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1 注意事项完整支持 1 注意事项注意事项 Prior to Firefox 50, border styles of rounded corners (with `border-radius` ) were always rendered as if `border-bottom-style` was `solid` . This has been fixed in Firefox 50.	IE 完整支持 5.5	Opera 完整支持 9.2	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4 注意事项完整支持 4 注意事项注意事项 Prior to Firefox 50, border styles of rounded corners (with `border-radius` ) were always rendered as if `border-bottom-style` was `solid` . This has been fixed in Firefox 50.	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持
见实现注意事项。

另请参阅

The other style-related border properties: border-left-style , border-right-style , border-top-style ，和 border-style .
The other bottom-border-related properties: border-bottom , border-bottom-color ，和 border-bottom-width .

元数据

最后修改： Jul 24, 2020

在此页

句法