border-bottom - CSS（层叠样式表） 编辑

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

与所有的简记属性相同， 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;

值

<br-width>

见 border-bottom-width。

<br-style>

见 border-bottom-style。

<color>

见 border-bottom-color。

形式化语法

<line-width> || <line-style> || <color>
where 
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

示例

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

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

规则

规则	状态	评价
CSS Backgrounds and Borders Module Level 3 border-bottom	Candidate Recommendation	没有直接的改变，即使 border-bottom-color 值的修改被确定。
CSS Level 2 (Revision 1) border-bottom	Recommendation	没有显著的变化。
CSS Level 1 border-bottom	Recommendation	初始定义。

浏览器兼容性

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.