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:
Every HTML element can be provided with a basic border via CSS, using one of 10 styles:
outset. There are also three CSS3 border styles –
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.
There are many online articles on
border-image, but I’ve found that few of them are terribly practical. Following up on my technical explanation of the property, I’ll try to reverse that that trend by showing how to create a postage stamp from a simple image with