StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

CSS 3 Rounded Corners

When New WordPress started using this i though you know Internet Explorer is definitely out now when i'm doing some css work that needs rounded corners I'm mostly using only this technique because buyers are ok with it although it's just for FireFox and Safari. And since most of people still don't know about this i figured it's good thing to share.

Of course i'm talking about Border-radius property for FireFox and Safari 3 (only). And here are some nice examples how to use it.

  1.  
  2. #box {
  3. background: #eee;
  4. border: 1px solid #ccc;
  5. padding: 15px;
  6. -moz-border-radius: 10px;
  7. -webkit-border-radius: 10px;
  8. }
  9.  

And now FireFox and Safari 3 users will have rounded corners.

Nice, huh ;)

And of course you don't have to make all corners rounded, it can be just top left etc, so the code goes like this (small not, for example you can't make rounded corners on images and stuff like that)

  • -moz-border-radius-topleft and -webkit-border-top-left-radius
  • -moz-border-radius-topright and -webkit-border-top-right-radius
  • -moz-border-radius-bottomleft and -webkit-border-bottom-left-radius
  • -moz-border-radius-bottomright and -webkit-border-bottom-right-radius

Update: I've just ran into border radius for opera (example -opera-border-radius: 10px;) but i haven't tested it yes, so i'm not sure it's working, anyway go to know.

Leave a comment on Stylized Web Have some feedback? Leave a comment

52 Comments So Far

  1. wow amazing i love it ..perfect.

  2. Css3 is powerful tool in designing. thank you very much for your help.This is a good technique for Safari and Firefox users. I wrote an article covering how to stick with CSS3 corners for them but fall back to corner images in IE,

    Regards
    Ricks

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>