The simplest method is to do something like this --
Code:
#main {
border-radius: 10px; // The official CSS3 standard, not really supported yet (Except in Opera, I believe)
-moz-border-radius: 10px; // Apply rounded corners for Firefox
-webkit-border-radius: 10px; // Apply them for Chrome / Safari
}
But like you said it doesn't work in all browsers -- IE8 and below does not support rounded corners of any kind. For that you'd need to resort to some sort of JS. I've used this one in the past: http://dillerdesign.com/experiment/DD_roundies/. But obviously if a MooTools version exists that would be ideal.
That said, since rounded corners are entirely aesthetic and don't affect the usability or functionality of the site at all, many developers have the attitude that it's OK for the site to not like identical in every single browser. They just apply the CSS above and live with the fact that IE will have square corners.
Bookmarks