border-bottom

在此页

组成特性
句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

border-bottom 简写 CSS property sets an element's bottom border . It sets the values of border-bottom-width , border-bottom-style and border-bottom-color .

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.

As with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that ...

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

... is actually the same as ...

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

... and the value of border-bottom-style given before border-bottom is ignored. Since the default value of border-bottom-style is none , not specifying the border-style part results in no border.

组成特性

此特性是下列 CSS 特性的简写：

句法

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

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

值

<br-width>: 见 border-bottom-width .
<br-style>: 见 border-bottom-style .
<color>: 见 border-bottom-color .

形式定义

初始值	as each of the properties of the shorthand: `border-bottom-width` : `medium` `border-bottom-style` : `none` `border-bottom-color` : `currentcolor`
适用于	所有元素。它还适用于 `::first-letter` .
继承	no
计算值	as each of the properties of the shorthand: `border-bottom-width` : the absolute length or `0` if `border-bottom-style` is `none` or `hidden` `border-bottom-style` ：如指定 `border-bottom-color` ：计算颜色
动画类型	as each of the properties of the shorthand: `border-bottom-color` : a color `border-bottom-style` : discrete `border-bottom-width` : a length

形式句法

<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>

范例

Applying a bottom border

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;
}

Results

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-bottom' in that specification.	候选推荐	No direct changes, though the modification of values for the `border-bottom-color` do apply to it.
CSS Level 2 (Revision 1) The definition of 'border-bottom' in that specification.	推荐	No significant changes.
CSS Level 1 The definition of 'border-bottom' in that specification.	推荐	初始定义

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-bottom`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

在此页