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.

30 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. @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. 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…

  4. I blog frequently and I seriously appreciate your information. The article has really peaked my interest. I will book mark your site and keep checking for new information about once a week. I subscribed to your Feed as well.

  5. An impressive share! I’ve just forwarded this onto a colleague who has been doing a little homework on this. And he in fact bought me lunch due to the fact that I found it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanks for spending time to talk about this topic here on your internet site.

  6. Your style is so unique compared to other people I have read stuff from. Thank you for posting when you have the opportunity, Guess I’ll just book mark this blog.

  7. An impressive share! I have just forwarded this onto a coworker who has been doing a little homework on this. And he actually bought me breakfast because I found it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanx for spending some time to talk about this subject here on your web site.

  8. I would like to thank you for the efforts you have put in penning this site. I am hoping to view the same high-grade content by you in the future as well. In truth, your creative writing abilities has motivated me to get my own blog now 😉

  9. Having read this I believed it was extremely informative. I appreciate you finding the time and effort to put this content together. I once again find myself spending a lot of time both reading and leaving comments. But so what, it was still worthwhile!

  10. Can I simply say what a relief to discover an individual who really knows what they are talking about on the net. You actually know how to bring an issue to light and make it important. More and more people should read this and understand this side of your story. I can’t believe you’re not more popular because you certainly have the gift.

  11. Hi, I do think this is a great website. I stumbledupon it 😉 I may revisit once again since i have book marked it. Money and freedom is the greatest way to change, may you be rich and continue to guide other people.

  12. Howdy! This blog post couldn’t be written any better! Going through this article reminds me of my previous roommate! He constantly kept talking about this. I am going to send this article to him. Pretty sure he’s going to have a good read. Thank you for sharing!

  13. Your style is so unique compared to other folks I have read stuff from. I appreciate you for posting when you have the opportunity, Guess I will just book mark this web site.

  14. Aw, this was an extremely nice post. Spending some time and actual effort to make a great article… but what can I say… I procrastinate a lot and don’t manage to get nearly anything done.

  15. I was more than happy to discover this site. I want to to thank you for your time due to this wonderful read!! I definitely really liked every bit of it and I have you book-marked to see new things on your site.

Leave a Reply

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