Rounded corners are catching on quickly and so I was looking for an easy way to do them. There are quite a few ways already but most of them involve divs in divs in divs in divs etc. That is difficult to read, it’s easy to get confused if you are editing the code and also it eats up traffic.
Now, I have another way of doing this. I couldn’t say I invented this but I have definitelly at least re-invented this, because I haven’t seen it used anywhere before. I got this idea while doing Bluido. My way is XHTML valid, works on all major browsers (tried with success on IE, Opera, Mozilla Firefox). Furthermore, my manner of doing rounded corners requires no additional CSS stylesheet as the style is included already in the code. The best thing about it is that you can get by with only one single div. Althouh it might perform slightly better if you have a few but even in that case they do not seem confusing as they would all include text. This way uses images and I am, by the way, using a somewhat unusual way to get them, although I am pretty sure there are many other ways.
To talk about the downsides, I would go with the following ones. Firstly, your title text in the div must not be larger than the height of your rounded corner image. That is usually no problem though. Secondly, you must keep a little empty space at the bottom of every div (which is usually not a big problem too). And finally, the biggest problem about this design is that you do not have a text-margin in your div by default. If you want to have a margin, however, you have to add another div (that is extremely easy but I said it is a single-div design, huh) or slightly modify the code to make the image position absolute (I have not tested that yet). In addition, because of that, if you want to get by without divs or other elements, you should not use very long titles. In any case, it might be possible that this way is not for everyone but I don’t see any good reason why most designers couldn’t use it.
Okay, enough talk. Here it comes. You are going to need to do a few steps:
- Get the images. For this I have used the generator of Google (well, they didn’t want it to be that kind of a generator, but that only makes stuff cooler, huh). But you could use Cornershop. Or whatever you like.
For the sake of my example, name the files tr.png, tl.png, br.png and bl.png (top right/left, bottom right/left) accordingly.
- Now it gets simple. Just copy and paste this code in your HTML: