border-bottom (CSS property)
Share:
Free JavaScript Book!
Write powerful, clean and maintainable JavaScript.RRP $11.95
Syntax
Description
The border-bottom
shorthand property sets border-bottom-width
and/or border-bottom-style
and/or border-bottom-color
to the bottom side of an element simultaneously.
Borders are placed on top of the element’s background.
Example
This style rule assigns a 2px blue border to the bottom side of paragraphs within the element with ID "example"
:
#example p {
border-bottom: 2px solid blue;
}
Value
Refer to the following individual properties for specific information on allowed and initial values: border-width, border-style, and border-color.
Negative length values are illegal.
As with most shorthand properties, you don’t need to specify all the properties listed, but any omitted properties will revert to their default values. In the case of border-style
, if you omit a value no border will show at all, because the default value is none
. A border will only be visible as long as the border-style
property has been set to something other than none
or hidden
, or has been restated explicitly after the initial shorthand declaration. Otherwise, no border will show and the border-width
will be reset to zero. Therefore, its good practice to specify a value for the border’s style when you’re using shorthand notation.
Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.
New books out now!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs




