border

Summary

Shorthand property that defines the different properties of all four sides of an element’s border in a single declaration. It can be used to set border-width, border-style and border-color, or a subset of these.

Overview table

Initial value: medium none currentColor
Applies to: All elements
Inherited: No
Media: visual
Computed value: concatenation of border-width, border-style, and border-color.
Animatable: Yes
CSS Object Model Property: border
Percentages: N/A

Syntax

border: <border-width> OR <border-style> OR <border-color>
border: inherit

Values

inherit: When the value is set to inherit, the element will inherit the border values set on its parent.
<border-width> OR <border-style> OR <border-color>: A concatenation of <border-width>, <border-style>, and <border-color>. At least one of these must be present, and they may appear in any order.

<border-width>: A numeric value with any of the standard length units. The initial value is medium, which most browsers will render as 3px. See the border-width property.

<border-style>: This takes any of the range of values available to the border-style property. The initial value is none.

<border-color>: This takes any valid CSS color. See the border-color property. The initial value is currentColor.

Examples

A simple example showing multiple <div>s, identical in style except that they have different border 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

/**
 * border example
**/

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

p {
  padding: 2rem;
}

.one {
  /* The most basic border example you can show. */
  border: 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: 4px dashed;
}

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

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

.five {
  /* A more interesting border example to round things off. */
  border: 10px inset rgba(234,190,50,0.75);
}

View live example

Usage

 * It is usual to first use the border shorthand property to set the state of a default box, and then override it where needed, using the more specific shorthand properties border-width, border-style, and border-color. Each of these properties may take up to four values, respective to the sides of the box.

It is also common to override the border property with the properties specific to each individual side: border-top, border-right, border-bottom, and border-left. Each of these properties may take up to three values, defining the appearance (width, style, and color) of the designated side.
The following twelve “longhand” properties can be used to define the entire border of an object:

border-top-width, border-top-style, border-top-color, border-right-width, border-right-style, border-right-color, border-bottom-width, border-bottom-style, border-bottom-color, border-left-width, border-left-style, border-left-color.

Notes

The initial value of border is the concatenated result of the initial values of each component.
A border-bottom can be used as a divider between vertically laid out items, such as navigation menu items, or a new section. Authors will sometimes use this technique rather than inserting an <hr/> element in the HTML.
Another common technique is to use border-bottom properties for link underlining rather than text-decoration: underline, as it affords the designer more control.

Related specifications

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

Attributions

Mozilla Developer Network .

border

Summary

Overview table

Syntax

Values

Examples

Usage

Notes

Related specifications

See also

Related articles

Border

Box Model

Related pages

Attributions