It's worth noting that I'm fairly positive that I'm always a bit out of style. Despite the fact that I live within a couple hours of Seattle, apparently my tendancy to wear a plaid longsleeve shirt over a tee-shirt is not 'hip'. I try to point out that it's grunge, and therefore cool. At this point I'm politely reminded that grunge is dead.
As such, I can't say for sure that I know if rounded corners are cool anymore. Regardless of that fact, they do seem to crop up in website designs. A lot. I should know, as I get to cut those designs into a real page. A lot.
There is a big issue with rounded corner designs, though. Mainly, if you don't have a fixed height/width on the element getting prettified, you've got to find some element on the page on which you attach these corners, other than just the main body of the element. Why? Because there's no way as of yet to take a single image with all four corners that will adjust itself to fit a flexible box. So you have to use at least three images, and in some cases six, to get the job done (either one image for the top and bottom edges of the box in a case where the design is fixed width, or a seperate image for each corner in a non-fixed width design. In each case you need to also have an image to drawn the flexible width/height sides, as appropriate.) Each of these images needs to be a background to a different element, which means what was once one element in a design is now three to six elements.
As I hope we all know by now, presentation-only markup is typically a bad thing, and to be avoided whenever possible.
This is one of the reasons I'm fairly annoyed that some perfectly viable CSS3 properties like border-radius and enhanced CSS3 features like multiple backgrounds haven't been widely adoped by browser makers yet. Either of these could solve the rounded corner extra-markup problem. But, alas, only Safari is using multiple background so far, and only Safari and Firefox are using border-radius. So these aren't usable solutions yet (at least, not universally usable).
Well, nothing to do but swallow the bitter pill, avoid operating heavy machinery, and get to adding markup, right?
Not always. Before you get the aspirin and a glass of water, take a look more closely at your design and your markup. Sometimes you can avoid the extra markup altogether by getting tricky with how you make use of the existing elements on the page. Granted, you can't always avoid it. In particular, when you've got a rounded corner design that's flexible in width there's usually going to be some need for more markup. But for an element with a fixed width we can almost always avoid the need with a little cleverness.
Take, for example, an element on a page that is a simple news blurb in a rounded box, as in our proof here. If you were to consider the content of the blurb, you've got a headline, a paragraph of text, and a link. If we're looking to keep the markup as content-oriented as possible, this example page might be how it would look like prior to any styles being added. Clean simple code.
Now, in this example, we'll assume that the design is fixed-width, but that the new blurb can be longer or shorter, so the height of the box is dependent on the content. Does this mean we need to clutter up the markup with a couple of divs to hold the curved top and bottom of the box? No! We can do this rounded corner design without adding any new elements, nor do we need the delicious but unavailable border-radius or multiple background images.
"How is this?" some of you might ask. Simple, we'll make use of the elements that we already have on the page. First, and most obviously, we need to have the background for the main part of the box without the rounded bits. Since it's a solid color in this case, we can just use a background-color, but if it were a more complex design a background-image would be appropriate. The principle is the same for the purpose of our demo, as we're not worried about the round edges at the moment. We'll also want to add some padding to make the text fit in the blurb as the proof shows us. Here is what the page will look like at this point.
So, how are we adding those rounded corners? Well, time to make use of those elements already there. Since it's the topmost element in the blurb, we'll use the headline to hold the background image for the rounded top. We'll need to do some changes to the headline's padding and size to make sure it holds the image properly while still making sure the headline text itself fits in the page as the proof shows. To make the background image line up with the parent div's background, you'll need to compensate for the padding on the parent by putting a negative margin on the headline. Take a look here to see the result so far (and view the source to see our CSS).
Lastly, we'll want to add the bottom corners by making use of the bottom-most element in the blurb, which in this case is the "Read More" link. Same procedure as before, although don't forget to make the anchor a block-level element with display: block so it'll take the various height, weight, margin properties being used. Here's the final result, complete with CSS. Better yet, we didn't add a single element to the page purely for presentation.
Now, this is only one example of one solution to a problem involving a page element with rounded corners (or any similar non-standard shape that would normally seem to require extra markup). The trick is getting imaginative with what you have. Obviously you can't always avoid adding markup. It's not a sin if you do. But of course, it's great if you can avoid it.
So next time you're in this position, look at what your page already has before adding more.
