Every HTML element can be provided with a basic border via CSS, using one of 10 styles: none, hidden, solid, dashed, dotted, groove, ridge,  double, inset and outset. There are also three CSS3 border styles – wave, dot-dash, and dot-dot-dash – that are not yet supported in any browser.

The thickness of CSS borders is commonly defined in pixels, due to the fact that they are usually set to a “hairline” width in most site designs. Technically, border-width can be defined with any CSS measurement system supported by the browser, with the exception of percentages. The hue of a border can also be defined using any CSS color system, allowing for the possibility of semi-transparent borders.

The most common way of defining borders is as a shortcut of space-separated values:

border:  style thickness color;

In the examples below I’ve added a small around of border-radius to show how the styles appear in a curve.

You’ll notice that double is particularly sensitive to thickness, distributing the amount given in the shortcut between the inner and outer edges and the space between them. ridge and groove are similarly sensitive to color, using derivatives of the hue set in the shortcut to tone the inner and outer edges. For that reason, using “pure” colors: white, black, some primary hues – is not suggested, as doing so diminishes the browser’s ability to create a decent visual effect. inset and outset are similarly limited, and look “hokey” unless applied subtly.

Borders can be applied to each side of an element separately using border-left, border-bottom, etc, using the same shortcut syntax. This can be broken down further: border-right-color and border-left-width, etc.

To give one example where this level of detail might be used in a page, creating a Polaroid frame for a photograph with borders as shown at the top of this article (in which the thickness of the bottom edge is different from the other three sides) might best be served by using CSS like the following:

img#polaroid {
	border: 25px solid #e8e8d3;
	border-bottom-width: 50px;
}

Broadly speaking, SVG has far greater control over border styles, but I will need to leave that for another article.

Photograph by Paul Cox, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.