此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
border-bottom
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月.
border-bottom 简写属性把下边框的所有属性：border-bottom-color，border-bottom-style 与border-bottom-width 设置到了一个声明中。这些属性描述了元素的下边框样式。
尝试一下
border-bottom: solid;border-bottom: dashed red;border-bottom: 1rem solid;border-bottom: thick double #32a1ce;border-bottom: 4mm ridge rgba(211, 220, 50, 0.6);<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eee; color: #8b008b; padding: 0.75em; width: 80%; height: 100px;}与所有的简记属性相同，border-bottom 定义了它所有可以定义的属性，即使他们并没有被显式地定义。它把所有未被显式定义的参数都设置为了默认值，这意味着这些值将被定义为：
css
border-bottom-style: dotted;border-bottom: thick green;它和以下的代码是等价的：
css
border-bottom-style: dotted;border-bottom: none thick green;顺便一提，在border-bottom 之前定义的border-bottom-style 的值因此被忽略了。由于border-bottom-style 并没有默认值，未被定义的border-style 参数的值将被设置为none，也就是无底边框。
语法
css
border-bottom: 1px;border-bottom: 2px dotted;border-bottom: medium dashed blue;值
形式语法
border-bottom =
<line-width>||
<line-style>||
<color>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
示例
html
<div>This box has a border on the bottom side.</div>css
div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center;}规范
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |