Marilyn Burgess » CSS http://marilynburgess.com Mon, 29 Aug 2011 16:33:14 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 The Future of Round Corners http://marilynburgess.com/2009/04/future-of-round-corners/ http://marilynburgess.com/2009/04/future-of-round-corners/#comments Wed, 29 Apr 2009 21:50:54 +0000 marilyn http://blog.listcentral.me/?p=190 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.

I’m a rounded div!

The Mozilla border-radius directive can be broken down to specify each corner to have it’s own roundness:

.funnyRoundDiv{
     -moz-border-radius-bottomleft: 0px;
     -moz-border-radius-bottomright:5px;
     -moz-border-radius-topleft:10px;
     -moz-border-radius-topright:20px;
}
I’m a funny rounded div!

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!

You might also like...

]]> http://marilynburgess.com/2009/04/future-of-round-corners/feed/ 2