Valid HTML5

CSS3 Demos

Rounded Corners

One of the longest-running struggles in web design is surely the desire to make things less 'boxy' vs. the fiddliness of actually doing so.

The prehistoric solution was (of course) to slice images and slot them laboriously into table layouts. Not only is this semantically awful, it's also a nightmare to upkeep and amend.

More recently, we found ourselves trying to accomplish the same thing via extra <div>s and messy chunks of CSS. Better, perhaps, than the table solution, but still pretty painful, especially when fixed sizes aren't possible.

Happily, CSS3 offers a couple of new alternatives, which necessitate neither extra non-semantic content, nor multiple convoluted style declarations:

Simple curves without images

The easiest solution, should fancy borders not be required. The CSS3 declaration is simply border-radius, with from one to four measurement values, in the familiar top-left-bottom-right scheme:

Simple block with curved edges

Fancy border-images

The (slightly) more complex way of getting curves is to specify a CSS3 border-image declaration. This can be used to achieve much more than rounded corners - any kind of fancy border can be created - and it will, in future, be enormously handy for creating elegant UI elements for proper web applications.

The properties for border-image are slightly counter-intuitive - but lengths refer to the top-right-bottom-left values, as we're familiar with from properties like padding and margin. Here they're the depth of the image in use on each side. The example code below, for instance, uses this image: test image for border-image

The declaration shown uses the top 3px of the test image at the top, the bottom 3px as the bottom, and 3px in from each side. The rest of the declaration tells the browser to stretch the image over all remaining space; the alternative would be to use round, which would repeat (tile) the image across the spare space. Note that in both cases the border-image entirely covers the element's background, so it's often best to make sure you've got a 'hole' in the centre of the image, as here.

Again, this isn't a difficult concept to apply - the most important part is to make sure you've got attractive image(s) (which I may not have here...)

Unfortunately no version of IE, including 10, supports border-image.

CSS3 border-image