Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

complete css guide

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:

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.

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

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

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

Browser support

Get browser support information for the border-width properties in the downloadable version of this guide or our browser support tables.

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

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.

border-color

Browser support

Get browser support information for border-color properties in the downloadable version of this guide or our browser support tables.

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.

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.

border-style

Browser support

Get browser support information for the border-style properties in the downloadable version of this guide or our browser support tables.

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.

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

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.

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

Browser support

Get browser support information for the border shorthand properties in the downloadable version of this guide or our browser support tables.

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.