CSS and Borders
Without CSS, your choices for borders were those dull grey ones that surrounded tables and frames. Now however, since page presentation has become such an important aspect of web-design, stylesheets allow you lots of variety in your borders, and you can apply them to anything you want!
This page was last updated on 2012-08-21
The Parts
There are three settings you can change on your borders:
border-width
border-color
border-style
Most of the time you will want to affect all of these attributes at the same time, and use the all-encompassing border attribute. You use these individual attributes if you want to override something you have previously defined in a stylesheet. Here's an example:
<div style="border: 3px coral solid;">text</div>
Notice how each of the values for each part (width, color and style) come one after the other, with a space between each. The order doesn't matter, but you must have all three in, or the border won't display.
Specific sides
There are four parts to each border:
border-top
border-left
border-bottom
border-right
With these you can make each side of the border display differently. If you want the border to be the same all the way around, just use border. For instance,
<div style="border: red 4px dashed; border-bottom: blue 4px solid; border-top-style: ridge;">text</div>
Notice how you can affect just one attribute of one side by putting this choice into the attribute, as in border-left-style. So long as the attributes you're not affecting have been defined elsewhere, your border will appear like the rest but with this one attribute modified.
Attribute Values
Ok, here are all the values you can use for each attribute.
border-width
These can be denoted in pixels, like border-width: 3px, or you can use one of the three standard values thin, medium and thick.
border-width: thin;
border-width: medium;
border-width: thick;
border-color
Not much to say here that you don't already know. You can colour your borders using HEX colour codes or named colours.
border-style
These attributes govern how your borders are presented. In the examples below, the top four's borders are set at border-width: 5px, but the style will be applied to the border regardless of its width. The bottom four need wider borders (and lighter colours) to appreciate the effects. There are eight possible styles you can use:
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
