Investigation of rounded edges

Wow, it's ages since I posted anything! I have been concentrating on stuff like looking for jobs and on my MCTS 70-536 exam. I passed the exam in March but studying for it certainly didn't throw up anything all that fascinating. The last month I've been working. Thing about real tasks, as opposed to set exercises, is that they are more interesting and throw up problems you didn't expect. When I have the energy, I'll blog on the delights of using detached database files on two different computers.

For now, I'll lead into things gently by considering rounded edges:
The old-school approach to having a nice rounded edge is, you make a background image with a rounded edge and put your text over that. This can look perfect in a magazine but is really inflexible. For the web, you need to be able to present your text, in its pretty rounded box in various sizes of browser window, from the enormous landscape-sized screens we all seem to have these days right down to mobile devices. And since, as an owner of a wide screen myself, I do not like to give it all over to my browser, I pull it and push it out of shape constantly.

There are two, possibly three ways of making rounded edges on html block-level elements. The older version is to produce a great many small images, one for each round corner, one for each side. You then assign each as a background image for something. This requires finding and also inventing plenty of html elements to attach them to, since each can only accommodate the one background image. This produces plenty of non-semantic rubbish to fill up your code and demands that the browser downloads lots of images. This approach, its hurts me to say it, probably works best if you use tables. The various table cells fit together so well, you see!

Another approach is to download only one image, complete with its rounded edges and to divide it up on-the-fly, using Javascript. It still has to be divided amongst lots of otherwise-unnecessary divs and spans or table cells but it means loading fewer images. These days it is certainly easier to use the JQuery approach to JavaScript.

For my portfolio, which I revamped over the weekend, I thought I would revisit CSS3. Why not let the browser do this? My needs are simple. I just want rounded corners, sometimes with a rounded border. I do not want the moon, or even drop shadows.

I ended up making a separate css file for Mozilla and Webkit since, despite changing fashion, they still insist on their own strange corner attributes. For a box with four rounded corners:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

Opera and Chrome are both happy with

border-radius: 5px;

since this was first suggested by W3C oooh, nine years ago? As for Internet Explorer, even the brave new IE8, forget it. Look up Rounded Corners in Internet Explorer and you will see it is not supported in any current Microsoft browser. They say "We would like to point out the abundance of alternate solutions available on the Web." Yup, I'll try some of those out sometime. I'd like to have rounded corners for all customers. I will merely need to remind them that providing a solution for IE could mean hours or work per page. We are promised a solution in IE9. That would be nice. I hope people install it.