border-bottom

border-bottom 简写属性把下边框的所有属性： border-bottom-color ， border-bottom-style 与 border-bottom-width 设置到了一个声明中。这些属性描述了元素的下边框样式。

border-bottom的三个简记属性可以以任意顺序排列，并且它们中的任意一个都可以被省略。

与所有的简记属性相同， border-bottom 定义了它所有可以定义的属性，即使他们并没有被显式地定义。它把所有未被显式定义的参数都设置为了默认值，这意味着这些值将被定义为：

border-bottom-style: dotted;
border-bottom: thick green;

它和以下的代码是等价的：

border-bottom-style: dotted;
border-bottom: none thick green;

顺便一提，在 border-bottom 之前定义的 border-bottom-style 的值因此被忽略了。由于 border-bottom-style 并没有默认值，未被定义的 border-style 参数的值将被设置为 none ，也就是无底边框。

示例

border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

浏览器支持

浏览器都支持 border-bottom

语法

border-bottom : border-bottom-width | border-bottom-style | border-bottom-color

• 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
• 对应的脚本特性为 borderBottom 。

取值

• border-bottom-width ：设置或检索对象边框宽度。取值 <length> | thin | medium | thick 。参见 border-bottom-width 。
• border-bottom-style ：设置或检索对象边框样式。参见 border-bottom-style 。
• border-bottom-color ：设置或检索对象边框颜色。参见 border-bottom-color 。

例子

border-bottom: solid;
border-bottom: dashed red;
border-bottom: 1rem solid;
border-bottom: thick double #32a1ce;
border-bottom: 4mm ridge rgb(170, 50, 220, .6);

div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

<div>
  This box has a border on the bottom side.
</div>