| introduction | selectors | properties | advanced | real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values |
 |
 |
 |
 |
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.
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.
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
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.
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.
An element does not inherit the thickness of its parent element's border.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | B | Y | Y | Y | N |
Netscape Navigator 4.x: when a border-width is set on only one side, only this side will be drawn. The other sides should all be drawn with the default (medium) width.Workaround: Explicitly set a width on all sides using border-width.See border shorthand below for detailed information on applying borders to <td> elements (and making it work in older browsers!) |
|||||||||||
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.
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.
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.
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 Netscape prior to version 6.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | P | Y | Y | Y | N |
Netscape Navigator 4.x does not support using border-color to give different edges of the border different colors. It reads the border color completely incorrectly and gives one color to all sides. Remember too, you have to set a border-width as well as a border-style and border-color, or Netscape Navigator 4.x will not draw a border at all. |
|||||||||||
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.
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
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%.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | Y | Y | P | P | Y | P | Y | Y | Y | N |
Netscape Navigator 4.x does not support dotted and dashed styles, drawing them as solid.It does not give a different border style to the different edges if you attempt to apply different styles to different edges. It just uses the first value for every edge. More importantly, Netscape Navigator 4.x needs a border-width value as well as a border-style value in order for it to draw a border. Likewise if you only define a border-width value and no border-style value, it wrongly draws a border.Netscape Navigator 4.x does not support border-style when applied to td elements.Internet Explorer 4.0x Macintosh and Windows, 4.5 Macintosh and 5 Windows does not draw a border-style of double correctly if the border-width is thin. The border will be displayed as a single thin border.Internet Explorer 4.0x and 4.5 for Windows does not support dotted and dashed styles, drawing them as solid. |
|||||||||||
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.
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}
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | Y | Y | P | P | Y | N | Y | Y | Y | N |
Internet Explorer 4.x supports the border-top shorthand, but does not support it for inline elements.In simple cases, these shorthands are supported well in Internet Explorer 5 for Macintosh and 5.5 Windows. Difficulties in rendering can arise in more complex situations. |
|||||||||||
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N |
| The border shorthand is supported by all browsers other than WebTV, but has all the limitations of the border long-hands. | |||||||||||
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | Y | Y | P | P | Y | P | Y | P | Y | N |
As a general rule, simple borders on block elements are well supported in version 4 browsers and later on all platforms. Difficulties can arise however when you attempt to apply borders to inline elements, or the <table>, <tr> or <td> elements.
Netscape Navigator 4.x incorrectly draws a border when no Netscape 6 supports borders very well, including drawing them on <td> elements. While its support is very good, Opera 3.6 does not support borders on table cells ( Internet Explorer 5.0 Macintosh supports borders on <td> elements. Borders on inline elements should be avoided. They aren't supported at all on Internet Explorer 4.0x and 5 Windows and Macintosh and Internet Explorer 4.5 for Macintosh (they won't be drawn anywhere), and they cause rendering problems in Netscape Navigator 4.x, Internet Explorer 5 Macintosh and 5 and 5.5 Windows.
Some browsers put a default border around linked images. Developers have long been in the habit of using the transitional border attribute for images in their HTML to overcome this, ie |
|||||||||||
| introduction | selectors | properties | advanced | real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values |
|
|
|
|