I was reading Google Blogoscoped when something caught my attention. Philipp had demonstrated how easy it is to get rounded corners on boxes, but the trick is that it only works for Firefox. Here is the example he used and the CSS code that is used to create it:
border: 2px solid gray;
-moz-border-radius: 25px;
width: 250px;
height: 100px;
padding: 15px;
-moz-border-radius: 25px;
width: 250px;
height: 100px;
padding: 15px;
I have done rounded corners in CSS before but it wasn’t nearly that easy. I wonder when there will be some kind of standard for creating rounded corners that works in all browsers.
News Source: Google Blogoscoped
Hey Ryan,
Couple of things.
Rounded corners are a part of CSS3, and Firefox includes them but only with the -moz prefix. Other browsers have their own property name for it.
Secondly, there are many more properties which are will be added when CSS3 is released and browsers add support to it.
You can see all the CSS3 goodies [css3.info]
Thanks for the CSS3 link. I like all of the eye candy there!
-Ryan
As always we’ll have to design things twice for IE though – they still haven’t got CSS1 support, let alone 2. I’m guessing they’d deny that CSS3 exists.
Hey Ryan, documentation on Mozilla’s CSS extensions can be found at their [developer.mozilla.org] They also mention several bugs associated with the rounded corners, including no anti-aliasing in gecko 1.8 (although if you check out Firefox 3, you’ll notice gecko 1.9 doesn’t have that issue.)
Mozilla is always experimenting with future potential engine additions so when the standards are published, they have well polished code already in place.
@Aditya I don’t know of any other browsers that support native rounded corners. Care to point them out?