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 July 2015.

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

尝试一下

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-bottom

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support