-
border-bottom-style
2026-03-01 03:10:04
试一试
border-bottom-style: none;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: groove;
border-bottom-style: inset;
This is a box with a border around it.
#example-element {
background-color: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
body {
background-color: white;
}
注意： 规范并未定义不同样式的边框在角部的连接方式。
语法
css/* 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: revert;
border-bottom-style: revert-layer;
border-bottom-style: unset;
border-bottom-style 属性被指定为一个
关键词值。 正式定义
初始值none应用于所有元素。也适用于 ::first-letter。继承性否计算值同指定值动画类型离散
正式语法
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/* 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# border-style
浏览器兼容性
加载中…
另见
其他与样式相关的边框属性：border-left-style、border-right-style、border-top-style 和 border-style。
其他与底部边框相关的属性：border-bottom、border-bottom-color 和 border-bottom-width。
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何贡献 此页面最后修改于 2025 年 8 月 13 日，由 MDN 贡献者。
在 GitHub 上查看此页面 • 报告此内容的问题