What is The Best Way to Create Rounded Corners Using CSS?

Well there are couple of options when it comes to round corners.

Images

The old fashion way is using images.  Some say that the other ways (JS for example) aren’t nearly as good:  No anti-aliasing and senseless markup.

jQuery

All those JS fans would say go with jQuery, CSS support is minimal, images are too fiddly, to be able to select the elements you want to have round corners in jQuery makes perfect sense to even though some will no doubt argue otherwise. However, Javascript definitely has the highest scope for failure, and flickering in my experience. Here are couple of plugins you might consider using.

http://www.methvin.com/jquery/jq-corner-demo.html
http://plugins.jquery.com/project/jquery-roundcorners-canvas

CSS 3 and border-radius

With support for CSS3 being implemented in newer versions of Firefox, Safari and Chrome, it will also be helpful to look at “Border Radius”. But how about IE and Opera. You can always follow the “twitter way” handling this issue and my fave, downgrade the rounded corner feature to pointed corners on their website to IE users. Not a big deal really. Right?


    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

Like any other CSS shorthand, the above can also be written in expanded format, and thus achieve different Border Radius for the topleft, topright, etc.


    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-rightright-radius: 10px;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-rightright-radius: 3px;

 

Here couple more links if you’d like to see more examples and solutions:

  1. CSS Design: Creating Custom Corners & Borders
  2. CSS Rounded Corners ‘Roundup’
  3. 25 Rounded Corners Techniques with CSS

Leave a Reply


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


You've arrived on the "Advanced CSS/HTML Explained" weblog. Here you will find how can you tackle the more difficult topics of Cascading Style Sheets: Floating theory, Forms, Tables, Navigation elements, CSS Positioning. Also you will find lots of Resources, Tutorials, Articles, and Tips, Tricks Tools, and Techniques on CSS.

Subscribe to our RSS Feed Follow us on Twitter

Recent Posts

Categories

Twitter Updates

Bookmark and Share