| Home Web | Top Bottom | Contents Prev Next |
List of Border Properties
Border Width
Border Style
Border Color
Shorthand Properties
Example
border-top-width: thin|medium|thick|size;
border-bottom-width: thin|medium|thick|size;
border-left-width: thin|medium|thick|size;
border-right-width: thin|medium|thick|size;
border-width: thin|medium|thick|size; [1-4 values]
border-style: none|dotted|dashed|solid|double|
groove|ridge|inset|outset; [1-4 values]
border-color: color; [1-4 values]
border-top: width style color;
border-bottom: width style color;
border-left: width style color;
border-right: width style color;
border: width style color;
border-top-width: thin|medium|thick|size; border-bottom-width: thin|medium|thick|size; border-left-width: thin|medium|thick|size; border-right-width: thin|medium|thick|size; border-width: thin|medium|thick|size; [1-4 values]
Four individual properties, border-top-width, border-bottom-width, border-left-width and border-right-width can be used to specify the widths of the four sides of a border. Each of these can be specified as thin, medium or thick, or a specific size can be specified (be sure to indicate the unit you want used, as in 8px).
The border-width property can be used in place of these individual properties. You can specify up to four different values.
When you specify just one, it applies to all four sides.
When you specify two, the first value applies to the top and bottom, and the second applies to the left and right.
When you specify three, the first value applies to the top, the second to both the left and right, and the third to the bottom.
When you specify all four, they apply in this order: top, right, bottom left.
border-style: none|dotted|dashed|solid|double|
groove|ridge|inset|outset; [1-4 values]
border-style defines the style of border you want. Netscape 4 and IE do not support dotted or dashed, and show these as solid.
As with border-width, you can specify 1-4 different values. See border-width above for which side(s) each value apply to.
border-color: color; [1-4 values]
border-color defines the border color. Specify colors the same way as we have for the color property: a name such as red, or a hex code such as #ff0000.
As with border-width, you can specify 1-4 different values. See border-width above for which side(s) each value apply to.
border-top: width style color; border-bottom: width style color; border-left: width style color; border-right: width style color; border: width style color;
These properties let you specify a width, style and color all in one place. border only allows one set of values, which apply to all four sides.
This example shows a border around two different elements. Try looking at all of the different border styles, and try defining borders that have different characteristics on some of the sides.
The borders will look much better if you add some padding. Try adding padding: 5px; to these.
Try adding <i>...</i> around some of the text in the paragraph, and change the p selector to i. Does a border get drawn around the text? Most browsers won't draw a border around such inline elements, but some do. Netscape 6 is one such browser.
All the browsers that I've tried do a reasonable job of displaying this page. But, of course, they don't look identical.
Here's IE 5:
Here's Netscape 6:
And here's Netscape 4:
It's quite clear that different browsers have very different ideas of what a thick border is! You'll get more consistent results specifying actual sizes.
I personally like the way Netscape 4 puts the border close around the actual contents of the heading rather than the entire width of the page. But the important thing is just to be aware of this difference.
| Home Web | Top Bottom | Contents Prev Next |