Any element in cascading style sheets may have a border, of varying widths, colors and styles. Elements can even have every border a different style, width and or color.
The border properties are:
More than any other set of properties, the border properties have numerous shorthand ways of setting values. Pay attention to the descriptions below to determine how to, for example, set different values for the color of each edge, or the style of each edge.
These properties let you set the width of the respective edges individually or all at once.
Border widths can take either keyword values, or length values.
The keyword values that can be used are
There is no specification for what these keywords mean, so different browsers will probably (and as of writing indeed do) draw them as different thicknesses. The only guarantee is that thin is not thicker than medium which is no thicker than thick.
Length values are discussed in detail in our section on values. Using relative length values you can create borders that are in proportion with the size of an element, or its contents.
If no width is set, the thickness of a border is medium.
An element does not inherit the thickness of its parent element's border.
As of writing, seperate border values are only patchily supported by the major browsers. The border-width property, used to set the width of all four edges at once is to be preferred.
The border-width property can be used to set the value of each edge separately.
To do this, use more than one value for the property. You can use between one
value and four values for the border-width property.
One value sets all borders to the same width.
Two values set the top and bottom edges to the first value and the left and
right to the second.
Three values set the top edge width to the first value, the left and right edge
widths to the second value, and the bottom edge width to the third value.
Four values set the top edge width to the first value, the left edge width to
the second, the bottom edge width to the third and the right edge width to the
fourth.
Glad you asked?
Unlike border widths which we have just seen, border color is set using a single property. However, that doesn't mean you can't set each edge to a different color. As with the border-width shorthand property we just looked at, border-color specifies different edge colors by using more than one value.
border-color is specified by between one and four color values. We discuss color values in detail in our values section.
One color value specifies the same color for each edge.
With two color values, the first value specifies the color of the top and bottom
edges, the second specifies the color of the left and right edges.
With three color values, the first value specifies the color of the top edge,
the second the color of the left and right edges and the third the value of
the bottom edge.
With four color values, the four color values specify respectively the color
of the top, left, bottom and right edges.
If no color is specified for the border, the border has the same value as the element itself.
The border-color of an element is not inherited from its parent element.
As with border widths (and all border properties) support for different edges is far from perfect in major browsers.
In addition to width and color, the border of an element, or its individual edges can have a style. There are several possible styles, though not all are currently supported by current browsers.
As with border-color, different border-styles can be assigned to different edges of a border using the same syntax we saw for colors.
One border style value specifies the same border style for each edge.
With two border style values, the first value specifies the border style of
the top and bottom edges, the second specifies the border style of the left
and right edges.
With three border style values, the first value specifies the border style of
the top edge, the second the border style of the left and right edges and the
third the value of the bottom edge.
With four border style values, the four border style values specify respectively
the border style of the top, left, bottom and right edges.
The border-style keywords are
Rather than describe them, investigate each by way of example. You'll find that many appear the same in most browsers, because support for this property is not yet 100%.
If no border-style property is specified, the style of a border is none.
Elements do not inherit the border-style of their parent elements.
As with other border properties, support for specifying different edges of a border is far from perfect in major browsers.
You should also keep in mind that some browsers do not support every kind of style. Usually, where a style keyword is not supported, the browser draws the border as solid.
As mentioned at the beginning of this section, there are many different shorthand ways of specifying border values. These five properties let you specify with one property any or all of the border-style, border-width and border-color values for each edge respectively, or the entire border.
The shorthand properties simply take the same possible values as the full properties. To specify more than one property value with a shorthand property, simply separate the values by a space.
For example, to specify the color, width and style of the top edge of a border of an element you could use the following single property
border-top: red thick ridge
The default values of each type of property are discussed in the relevant sections above.
None of the border values of a parent element are inherited by child elements.
Keep in mind that not all styles are supported by each browser, nor do all browsers fully support different values on different edges of each border.