Brought to you by Style Master CSS editor

border properties

Using cascading style sheets any element may have a border, of varying widths, colors and styles. Elements can even have every border (top, left, bottom, right) a different style, width and color.

The border properties are:

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

Borders really are simple, but more than any other set of properties, they have numerous shorthand ways of setting values, which can at first appear to make them quite complicated. For this reason we've written Unscrambling the border mess below, to help you get started with an easy to understand way of creating borders.

Another result of the numerous shorthands is that the exact nature of the browser support for the different properties is difficult to express in one single place. Each of the properties has the usual information about how well they are supported individually. As well, though, we have some general information at the bottom of the page which clarifies (hopefully!) some of the more tricky issues involved in making borders actually work.

Border support generally

Unscrambling the border mess

As we've just seen, and a glance at the list of border properties will demonstrate, there is an almost bewildering array of border properties, many of which are shorthand ways of saying the same thing. For example, to give the top border a width, you could use any of border-top-width, border-width, border-top and border.

As a general rule, you can do everything there is to do with border properties using the following straightforward approach.

To define the same border properties for each side of the element, use the border property. For example, to give each side of an element the same thin, red solid border, we'd use the following declaration

{border: thin red solid}

To define a border property for a given side of an element, use the border-* property. For example, to give the top edge of an element a thin, red solid border, and the bottom edge a thick black dotted border we'd use the following declaration

{border-top: thin red solid;

border-bottom: thick black dotted}

It really is that simple. See below for details of what values you can give a border for its

width
color
style

For completeness, we discuss each of the possible properties and shorthands in turn.

border-top-width, border-left-width, border-bottom-width, border-right-width, border-width

What it does

These properties let you set the width of the respective edges individually or all at once.

Possible values

Border widths can take either keyword values, or length values.

The keyword values that can be used are

thin
medium
thick

There is no precise specification for how these keywords should be drawn, 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.

Default values

If no width is set, the thickness of a border is medium. Note that this does not mean that all elements have medium borders unless otherwise defined, In order for an element to have a border, it must be given a border style. Once you give it a style, it will then have a default width of medium.

Is it inherited?

An element does not inherit the thickness of its parent element's border.

Hints and suggestions

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.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

border-color

What it does

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 enabled different edge colors by using more than one value.

Possible values

border-color is specified by between one and four color values. We discuss color values in detail in our values section.

You can use border-color to give different colors to each edge of an element.

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.

Default values

If no color is specified for the border, the border has the same value as the element itself, that is the value specified by the color property. Note that this does not mean that all elements have a default border of the same color as the color of their content. It means that if you set a border-style only, your border will be drawn with a default color the same as the color of the element.

Is it inherited?

The border-color of an element is not inherited from its parent element.

Hints and suggestions

As with border widths (and all border properties) support for different edges is far from perfect in Netscape prior to version 6.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

border-style

What it does

In addition to width and color, the border of an element, or its individual edges can have a style.

border-style is the basic border property. In order for a border to be drawn at all, you must define a border-style. Once you define a border-style, you can if you wish let the other properties, border-width and border-color, be set at their default values. Generally, though, you will probably want to define all three aspects of your borders.

There are several possible styles, though not all are currently supported by major browsers.

Possible values

As with border-color, different border-styles can be assigned to different edges of a border using the same syntax we saw for colors.

You can use border-style to give different styles to each edge of an element.

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

none
dotted
dashed
solid
double
groove
ridge
inset
outset

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%.

Default values

If no border-style property is specified, the style of a border is none.

Is it inherited?

Elements do not inherit the border-style of their parent elements.

Hints and suggestions

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.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

border-top, border-left, border-bottom, border-right, border

What it does

As mentioned at the beginning of this section, there are confusingly many, and inconsistently 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.

Possible values

The shorthand properties simply take the same possible values as the full properties. As with the long hand way of describing borders, if you only give a value for style the border will be drawn with a default width and color. 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}

Default values

The default values of each type of property are discussed in the relevant sections above.

Is it inherited?

None of the border values of a parent element are inherited by child elements.

Hints and suggestions

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.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

next: margin properties

Brought to you by Style Master CSS editor