Thursday, June 26, 2008

Rounded corners in CSS3

Getting rounded corners in CSS3 would be as simple as setting the border-radius attribute.

Mozilla Firefox and WebKit-based browsers support the border radius, although with a non-standard attribute names: -moz-border-radius and -webkit-border-radius (yes, with the leading hyphen)

I've tried it on Firefox 3 and find the anti-aliasing to be a bit too fuzzy. Internet Explorer 7 doesn't support it yet though. Opera 9.5 doesn't seem to support it either.

There are a lot of other cool effects provided by CSS3, such as the nth child pseudoclass that allows you to, for example, provide styles for alternating rows in a list. The CSS looks a little like this:li:nth-child(2n) { background-color: #6f6; }li:nth-child(2n):hover { background-color: #090; }

It makes me wonder... if they had a 2n and a 3n, which would be applied on the 6th element? :-P I guess that would be browser specific behavior.