Definition and Usage
The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.
-
Initial the concatenation of the initial values of its longhand properties:
- border-bottom-width: medium
- border-bottom-style: none
- border-bottom-color: currentColor
- Applies to all elements
- Inherited no
- Media visual
-
Computed Value 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: as specified
- border-bottom-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
-
Animatable as each of the properties of the shorthand:
- border-bottom-color: yes, as a color
- border-bottom-style: no
- border-bottom-width: yes, as a length
- Canonical order order of appearance in the formal grammar of the values
Syntax
Formal syntax: <br-width> || <br-style> || <color>
Values
- <br-width>
-
See border-bottom-width.
- <br-style>
-
See border-bottom-style.
- <color>
-
See border-bottom-color.
Examples
element {
border-bottom: 1px solid #000;
}
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
Basic support |
1.0 |
1.0 (1.7 or earlier) |
4 |
3.5 |
1.0 (85) |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
1.0 |
1.0 (1.0) |
(Yes) |
(Yes) |
(Yes) |