3

CSS 3 Border Radius

Feb 3, 2009 In tool chest

Border-radius is one of my new favorite additions to CSS 3 and it is already supported in some browsers. Border-radius allows designers to apply radius corners on elements on the page.  There are a few drawbacks to this approach.

  • Users browsing with IE8 and below and a handful of other browsers (Roughly 50% of your audience), will not see the intended effect.  These people will see the content, just without the rounded corners.
  • The pixels on the corners do not render out as clean as I would like them, so it may be a good idea to keep any border colors closer in value to the background color.

So, with that in mind I’ll move on.

Example 1:

This is an example of a div using border-radius.

CSS:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border: 1px solid #ccc; padding: 15px;

Example 2:

Maybe we can give it some color and depth.

CSS:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border: 2px solid #5c6528; border-top: 1px solid #8b983c; border-left: 1px solid #8b983c; background-color: #c7db4f; padding: 15px;

Example 3:

Maybe the corners need to be different sizes. I used shorthand below where the sizes start at the top left and work around clockwise. This could also be done like this:
-moz-border-radius-topleft:20px; -webkit-border-top-left-radius: 20px
-moz-border-radius-topright:20px; -webkit-border-top-right-radius: 20px
etc.

CSS:
-moz-border-radius: 20px 20px 40px 40px; -webkit-border-radius: 20px 20px 40px 40px; border: 2px solid #5c6528; border-top: 1px solid #8b983c; border-left: 1px solid #8b983c; background-color: #c7db4f; padding: 20px 20px 40px 20px;

So anyway, I was curious about this and thought what I found might be useful to others.

3 Comments

  1. sheila miller
    Tuesday 3, 2009

    Have felt your pain in ATL.INT the pits.Going to Co. 2-21.How is the family? I have not seen you any this year we look for you though.Take care.tell Dorinda I miss her at night on 4500…

  2. Jeff
    Tuesday 3, 2009

    @sheila – I haven’t skied much this year, but hope to get up that way more. We are all doing well and I hope you are too. Have fun in CO!

  3. jeffRainey (Jeff Rainey)

    New blog post: CSS 3 Border Radius http://tinyurl.com/c9c7uu

Leave a Reply