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:
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
margin. Here they're the depth of the image in use on each side. The example code below, for instance, uses this 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