CSS Rounded Corners

Hey,

I'm pretty new to Contao. I'm in the process of building my first website and can't work out how to get rounded corners for the main container. I've tried using <span> tags and have also attempted to use Mootools, but nothing seems to work effectively across all browsers.

Can someone point me in the right direction?

Thanks,
Chris

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.

If I were you I would use the CSS3 'border-radius' and vendor specific ('-moz-', '-webkit-', '-o-' prefix) properties to round a box's corners. It'll leave out IE 8 and older users (though users of IE 9, which should ship at the end of this year, should be fine), though it's way less hassle than implementing all those nasty fixes. The only real cross-browser solution is by using images, though this will lead to more unnecessary web traffic and technical constraints (as boxes either have to be fixed-size or you'll need way more markup – and even this can break).

You could add a JS that tries to emulate rounded corners in IE<9 and older Browser versions but this script should work fully automatic i. e. does not require you to add class selectors to elements or similar.

Eagerly trying to make the viewing experience a 100 % equal on every plattform is not worth the hassle and man hours needed to implementing workarounds.


Edit: This post has been written a couple of hours ago. I had a few problems with this site thus my answer is belated.

This should work in all browsers - http://www.curvycorners.net/
I know the issue it does not work in the Opera, but to solve it just download the 2.1 beta version. The stable currently does not support this browser.