Going round the corners

Do you like boxes on your web sites that are square or with rounded corners? They look smoother with rounded corners don’t they? More like buttons.

Well CSS3 is adding a rounded corners property, but it is still not yet ratified. Some browsers have preliminary support for the draft standard, but not all of them.

Mozilla/Firefox includes support using the prefix ‘-moz-‘. And it works as described.

I have seem mention that Safari supports the border-radius property. Some sites say use a prefix of ‘-webkit-‘ and others ‘-khtml-‘. Unfortunately I can’t keen to get either to work in Safari 2.0.4. I think it might only work on nightly builds, that is demo versions.

And according to this MSDN blog post Internet Explorer 7 does not support the property, and will not till it is official. Thought it does include a tutorial for achieving the look using tables and images.

So you can do fancy rounded corners in CSS if you want to, but only people using Mozilla or Firefox will get the benefit of them.

This entry was posted in Tech, Web sites and tagged , , . Bookmark the permalink.

2 Responses to Going round the corners

  1. Ben says:

    Note, that if you add the same thing with the “-webkit” prefix, it will work in Safari as well. I think “-khtml” will add KHTML support as well.

  2. Leefe says:

    You mean suffix, not prefix.

    And as I said in the post, this only works in Safari 3, not Safari 2.

Leave a Reply to Leefe Cancel reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.