-
border-bottom-style
2026-03-01 03:09:25
尝试一下
border-bottom-style: none;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: groove;
border-bottom-style: inset;
这是一个带有边框的盒子。
#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 属性指定为单个
关键字值。 形式定义
初始值none适用元素所有元素. It also applies to ::first-letter.是否是继承属性否计算值as specified动画类型离散值
形式语法
border-bottom-style =
= none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 此语法反映了基于 CSS Borders and Box Decorations Module Level 4 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。
示例
演示所有边框样式
HTML
html
none hidden dotted dashed solid double groove ridge inset outset 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;
}
结果
规范
Specification
CSS Backgrounds and Borders Module Level 3# border-style
浏览器兼容性
参见
其他与样式相关的边框属性：border-left-style、border-right-style、border-top-style 和 border-style。
其他与底部边框相关的属性：border-bottom、border-bottom-color 和 border-bottom-width。
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年11月3日 by MDN contributors.
View this page on GitHub • Report a problem with this content