This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

border-bottom

Summary

Shorthand property that defines the border-width, border-style and border-color of an element’s bottom border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the bottom border — border-bottom-width, border-bottom-style and border-bottom-color.

Overview table

Initial value
For style values, the initial value is none. For color values, the initial value is currentColor. For width values, the initial value is medium, which is computed as about 3px in most browsers.
Applies to
All elements
Inherited
No
Media
visual
Computed value
See Notes below.
Animatable
Yes
CSS Object Model Property
borderBottom
Percentages
N/A

Syntax

  • border-bottom: border-width border-style color
  • border-bottom: inherit

Values

border-width border-style color
The border-bottom property can contain up to three components:
  • border-width: This takes a numeric value with any of the standard length units.
  • border-style: This takes any of the range of style values available to the border-style property, which includes none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. For more details about each, see the border-style page.
  • color: This can take any valid CSS color as its value.
inherit
When we set the value to inherit, the element will inherit the border values set on its parent.

Examples

/**
 * border-bottom example
**/

div {
  width: 150px;
  height: 50px;
  margin: 1rem;
  float: left;
}

p {
  padding: 0.25rem;
}

.one {
  /* The most basic border-bottom example you can show. */
  border-bottom: 1px solid black;
}

.two {
  /* If you don't explicitly set a color, currentColor is used, which
     equates to the text colour of the element, in this case black.   */
  border-bottom: 4px dashed;
}

.three {
  /* When no width is specified, the default width medium is used,
     which computes to about 3px in most browsers */
  border-bottom: dotted red;
}

.four {
  /* When no border style is specified, the border won't appear,
     as the default border style is none. */
  border-bottom: 10px black;
}

.five {
  /* A more interesting border example to round things off,
     showing a basic border being set, and then the bottom
     border being overridden */
  border: 1px inset black;
  border-bottom: 10px inset rgba(234,190,50,0.75);
}

View live example

A simple example showing multiple <div>s, identical in style except that they have different border-bottom properties applied to them.

<div class="one"><p>One</p></div>
<div class="two"><p>Two</p></div>
<div class="three"><p>Three</p></div>
<div class="four"><p>Four</p></div>
<div class="five"><p>Five</p></div>

View live example

An example showing the use of border-bottom property with the hover effect…It gives a beautiful result

/**
 * Example of border-bottom property

 */

#withoutBullets ul {
    color: #f06;
    font: italic 100% Georgia, serif;
    width: 500px;
    padding:10px;
    margin:10px;
    list-style-type:none;   /*To remove the default bullet style*/
}
#withoutBullets li{
    display:inline;
    margin:8px;
    padding:4px;
}
#withoutBullets li:hover{
    border-bottom:3px solid black;
    border-radius:4px;
}
a:link{text-decoration:none;color:green;}
a:hover{text-decoration:none;color:green;}
a:active{text-decoration:none;color:green;}
a:visited{text-decoration:none;color:green;}

View live example

Usage

 * It is usual to use the border-bottom property to set the default state of a box's bottom border, and then override individual values using more specific propeties, such as border-bottom-width or border-bottom-color.
  • border-bottom can be used as a divider between vertically laid out items, such as a vertical navigation menu, or table cells.

Notes

Computed values

For style values, the computed value is as specified. For width values, the computed value is the absolute pixel value, or 0 if the value is set to none or hidden. For color values, the computed value is the equivalent RGB value, or the equivalent RGBA value for translucent colors.

Related specifications

CSS Level 3
Candidate Recommendation
CSS Level 2 (Revision 1)
Recommendation
CSS Level 1
Recommendation

See also

Related articles

Border

Related pages