View in EnglishAlways switch to English

border-bottom-style

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-bottom-style 设置元素底部border 的线条样式。

尝试一下

border-bottom-style: none;

border-bottom-style: dotted;

border-bottom-style: dashed;

border-bottom-style: solid;

border-bottom-style: groove;

border-bottom-style: inset;

<section>  <div>    这是一个带有边框的盒子。  </div></section>

#example-element {  background-color: #eeeeee;  color: black;  border: 0.75em solid;  padding: 0.75em;  width: 80%;  height: 100px;}body {  background-color: white;}

备注：规范中没有定义不同样式的边框在边角处是如何连接的。

语法

css

/* 关键字值 */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;/* 全局值 */border-bottom-style: inherit;border-bottom-style: initial;border-bottom-style: revert;border-bottom-style: revert-layer;border-bottom-style: unset;

border-bottom-style 属性指定为单个<line-style> 关键字值。

形式定义

初始值	`none`
适用元素	所有元素. It also applies to`::first-letter`.
是否是继承属性	否
计算值	as specified
动画类型	离散值

形式语法

border-bottom-style =
<line-style>

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

示例

演示所有边框样式

HTML

html

<table>  <tr>    <td>none</td>    <td>hidden</td>    <td>dotted</td>    <td>dashed</td>  </tr>  <tr>    <td>solid</td>    <td>double</td>    <td>groove</td>    <td>ridge</td>  </tr>  <tr>    <td>inset</td>    <td>outset</td>  </tr></table>

CSS

css

/* 确定表格的外观 */table {  border-width: 3px;  background-color: #52e385;}tr,td {  padding: 3px;}/* border-bottom-style 示例类型 */.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;}