Nowhere is this axiom of design more readily apparent than on board the world famous battlestar Galactica. This ship, the last of her kind still in service, was constructed over fifty years ago during the early days of the Cylon War. Originally, there were twelve battlestars, each representing one of Kobol's twelve colonies.

You'll see things here that look odd, even antiquated to modern eyes. Phones with cords, awkward manual valves, computers that barely deserve the name. But all of it is intentional. It's all designed to operate in combat against an enemy who could infiltrate and disrupt all but the most basic computer systems.

It’s uncertain when the design motif originated - perhaps with the original 1980’s Battlestar Galactica TV series - but there’s something about clipped corners that screams “high tech” to viewers. Unfortunately, creating that appearance has been rather difficult in web design. Lea Verou outlined some clever ways to achieve clipped corners in her recent CSS Secrets book, but I thought up a few alternatives:

Photograph of a model on a chair being sprayed by water

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.