I seem to been obsessed with round corners, with all of the posts I have written on the topic (I had no idea!), so I thought I’d do some research into the future of round corners on these great inter-tubes and share my findings with you.
Currently the Mozilla based web browsers, Firefox being the most popular, supports the css directive -moz-border-radius, which effectively gives web elements round corners without using and nested divs or images. It really works quite beautifully, but it only exists in the Mozilla based browsers. IE, and others don’t know what to do with the directive, and just toss it out.
The Mozilla border-radius directive can be broken down to specify each corner to have it’s own roundness:
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:20px;
}
The CSS3 web standard has specified that browsers that meet the standards will implement this same functionality with the CSS3 directive border-radius. CSS3 is still a work in progress, and it will be an even longer wait for all of the browsers to catch up with the standards it sets. Us web developers do have some good things to look forward to though!
If you are interested in learning more about CSS3, Six Revisions has an awesome LIST of Useful Resources for CSS3.
Gotta love lists!
2 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
Webkit-based browsers (Safari, iPhone) also support CSS rounded corners via the -webkit-border-radius attribute.
Very true Keith! Ah… those iPhone users are lucky for so many reasons!