Boxing with CSS, Part II: No Margin For Error
Draw Your Borders Continued
|
| ||||
| ||||
|
|
Say you want a simple, 2mm red border around a paragraph. Using the properties described in the previous page, you will probably have to use something like the following:
P.redborder { border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 2mm; border-right-width: 2mm; border-bottom-width: 2mm; border-left-width: 2mm; border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red; }
That's a lot of properties for something that simple. It would be nice if you could just use one property for all of that. Thankfully, you can.
Border Shorthand Properties
| Property: | border-width, border-color, border-style |
| Accepted values: | One to four values as per individual properties |
| Initial value: | As per individual properties |
| Applies to: | All Elements |
| Inherited: | No |
These shorthand properties set the border width, color or style on all sides of a box. They work much like the margin and padding shorthand properties, accepting one to four values. If only one value is given, it is used for all sides. If two values are given, the first is used for the top and bottom sides and the second for the left and right sides. If three are given, then the first one is used for the top, the second for the sides and the third for the bottom. If four are given, then the values are set for all sides in a clockwise pattern starting from the top (top-right-bottom-left). So, our example can be shortened to the following:
P.redborder { border-style: solid; border-width: 2mm; border-color: red; }
You can also shorten more complicated examples. The following two rulesets are equivalent:
P.redborder { border-style: solid double; border-width: 1em 0.5em 2em; border-color: red red green green; } P.redborder { border-top-style: solid; border-right-style: double; border-bottom-style: solid; border-left-style: double; border-top-width: 1em; border-right-width: 0.5em; border-bottom-width: 2em; border-left-width: 0.5em; border-top-color: red; border-right-color: red; border-bottom-color: green; border-left-color: green; }
| Property: | border-top, border-left, border-bottom, border-right |
| Accepted values: | A border width, a border color, and a border style in any order |
| Initial value: | As per individual properties. |
| Applies to: | All Elements |
| Inherited: | No |
These shorthand properties set all border characteristics for one side of an element. They are reminiscent of the background property which we saw in the previous tutorial, in that they accept border width, color and style values in any order. So, our example can be written as:
P.redborder { border-top: 2mm red solid; border-right: red 2mm solid; border-bottom: solid red 2mm; border-left: 2mm solid red; }
| Property: | border |
| Accepted values: | A border width, a border color and a border style in any order |
| Initial value: | As per individual properties. |
| Applies to: | All Elements |
| Inherited: | No |
The border property does the same but applies to all four sides of a box. Our example can thus be condensed to only one property like this:
P.redborder { border: red solid 2mm; }
That's all of the border properties. There may be a lot of them, but they're all used for pretty much the same things. However, the things that Netscape and Internet Explorer do with them is another story altogether
