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
, andborder-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>
/**
* 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);
}
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
, andborder-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 thantext-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
See also
Related articles
Border
border
Box Model
border
Related pages
- CSSStyleDeclarationCSSStyleDeclaration
- currentStylecurrentStyle
- defaultSelecteddefaultSelected
- runtimeStyleruntimeStyle
- stylestyle