CancelImage Upload

Producing rounded borders with -moz-border-radius CSS property and why not to use it

Web-designers have for years been longing for a simple CSS command that can produce a rounded corner effect on various HTML elements. This is because although a work around has been invented a long time ago to produce this effect (using rounded corner pictures to fake the rounded corners), most of us long for a more code elegant solution code wise.

Thanks to the CSS property -moz-border-radius rounded borders have taken one giant leap towards becoming reality. The downside? It is a CSS3 property, and right now it pretty much only works on Netscape based browsers.

In a few years time, when IE has come up with its own equivalent of this piece of code, and when the command has actually become a W3C standard, these thoughts here will probably be irrelevant. As things stand at the moment however the old way of faking rounded corners with pictures is still a better solution, as at least it will work on all browsers.

Another issue that I have with the rounded corners on Netscape, is that on certain backgrounds they do not really look that round. There's a curve there, but it is by no means smooth. But judge for yourself, and try the following code:

<div style="width:500px; text-align:center; background:#eee; border:1px #ff0000 solid; padding:5px; -moz-border-radius:10px;">-moz-border-radius:10px; </div>

Want to leave a comment?

No problem. Just enter your email and password below.

register | home | reminder

myDesignTool Networking •