CSS 3 Border Radius

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.

4 thoughts on “CSS 3 Border Radius”

  1. 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. At the firm I work for, we often have an “old” way of coding websites, aside from me and another coworker. I have yet to jump into buliding a corporate website via the whole CSS Only way, and that is simply because some of the companies we work with are paying alot of money and they want their site to look good, and unfortuntely, sometimes these people still use old browsers like NS 4. In fact, one client of ours vowels she will not give up her browser at home even after my coworker has explained to her that its 8 years old and outdated, etc…

Leave a Reply

Your email address will not be published. Required fields are marked *