Friday, June 10, 2005

Web development notes - Rounded corners in Mozilla



Here's another cool thing I recently discovered while making the MovableType templates for the new version of my personal journal I'm developing right now; one piece of supplemental code in your CSS document will cause Mozilla-based browsers (like Firefox and Netscape 8) to display a box of text with rounded corners. I'm attaching a few screenshots of it in action, for those who are not currently on a Mozilla-based browser themselves. (And really, if you haven't switched to Firefox yet, you've got no one to blame but yourself.) Achieving the effect couldn't be easier; simply add the following attribute to the CSS specification of any element you want to affect:

{ -moz-border-radius: 20px; }

...using whatever number and unit of measurement you wish, of course. All other browsers will ignore this attribute and simply display the text as it would normally look; Mozilla-based browsers, though, will recognize the attribute, and display the rounded corners like seen in the screenshots above. This can also be individually defined for each corner, like so:

{ -moz-border-radius: 0px 20px 0px 0px; }

...to get some of the cool effects like you see above, where only one corner out of the four has been rounded. (The numbers affect the corners in the following order: top-left, top-right, bottom-right and bottom-left.)

Anyway, nothing too earth-shattering here, but definitely a cool option for presenting something special to users of Mozilla-based browsers. Happy curving!