CSS3 Rounded Corners

The CSS3 border-radius property allows you to easily round corners on elements. It is super easy to do and is probably one of the most used CSS3 rules today.

To round all sides of the element by ‘x’ pixles:

-webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */

To round individual corners (the long way):

-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 0;

border-top-left-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 0;

Or you could do it the shorthand way (recommended):
border-radius: [top-left] [top-right] [bottom-right] [bottom-left]

-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;

Also the background-clip property can be added if you don’t want a bg color from leaking outside the border:

  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.

This post currently has no responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

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