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:


 .element{
  -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;
}

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

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 *

Current day month ye@r *