Name

border-width — NN 4 IE 4 CSS 1

Synopsis

Inherited: No

A shortcut attribute that lets you set multiple border edges to the same or different width. For both browsers, you may supply one to four space-delimited width length values. The number of values determines which sides receive the assigned widths.

CSS Syntax

border-width: thin | medium | thick | length {1,4}

JavaScript Equivalent

borderWidths()

Value

Three constants—thin | medium | thick—allow the browser to define exactly how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of length values at the beginning of this chapter).

This attribute accepts one, two, three, or four borderStyle values, depending on how many and which borders you want to set with specific styles. Value quantities and positions are interpreted as follows:

Number of Values

Effect

1

All four borders set to value

2

Top and bottom borders set to the first value, right and left borders set to the second value

3

Top border set to first value, right and left borders set to second value, bottom border set to third value

4

Top, right, bottom, and left borders set, respectively

Initial Value

medium (IE); 0 (NN)

Example

H1 {border-style: ridge; border-width: 3px 5px 3px}
DIV {border-style: solid double; border-width: 4px}

Applies To

All elements (CSS and NN); block and replaced elements (IE).

Object Model Reference

IE

[window.]document.all.elementID.style.borderStyle

Get Dynamic HTML: The Definitive Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.