CSS Snippets

The border-radius command can be used in many different ways. Using a single value creates rounded corners of the same size, but the property can also be used with different values for each corner, allowing you to create Tabs or other interesting shapes.

The syntax for creating corners of different sizes, can be complex, but there is a shorthand version, which I always use instead. The order of the corners starts with the top-left corner and moves clockwise, ending with bottom-left.

/* I'm adding "px" after 0 so it's easy to change values, but it's not needed for 0 */
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;

Explanation

Creating other shapes is just as simple. You can make any of the 4 corners rounded and with unique values.

.opposite { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 20px 0px 20px 0px;
  -webkit-border-radius: 20px 0px 20px 0px;
  border-radius: 20px 0px 20px 0px;
}

If you take the rounded corner to the extreme, you can create a leaf shape. Also, note the shorthand. When both sets of opposite corners have the same values, you only have to type 2 numbers once. (’100px 0′, instead of ’100px 0 100px 0′.)

.leaf { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 100px 0px;
  -webkit-border-radius: 100px 0px;
  border-radius: 100px 0px;
}

Finally, you can make every corner have a different value, creating unique shapes.

.odd { 
  width: 100px; height: 100px;
  background-color: #A0DE21; 
  -moz-border-radius: 50px 30px 10px 0px;
  -webkit-border-radius: 50px 30px 10px 0px;
  border-radius: 50px 30px 10px 0px;
}

If you want to create rounded corners without images, you can by using CSS3. The border-radius property is one of the best supported CSS3 properties and can be used today. You can even get it to work in Internet Explorer versions 6-8 with a plug-in. As with most CSS3 properties, you need to target all the major browsers by using vendor-specific prefixes.

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

Explanation

A simple DIV with a class of “shape” to give it dimension and color.

<div class="shape"></div>width: 100px;
height: 100px;
background-color: #5d8d89;


Now I’ve added the border-radius property to round the corners.

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


If you want to make a circle you can use a radius equal to half the width. (In this case, that’s 50px.)

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


Notes

• Put the vendor specific prefixes first. When CSS3 is implemented across all browsers consistently, the border-radius property at the end will be the one used.
• Smaller numbers in the radius mean less of a rounded corner. Larger numbers will give a larger curve.
• border-radius is well supported in all the latest versions of the modern browsers. IE9+, Chrome10+ and Opera 10.5+ all support the regular non-prefix version. You should still use -moz and -webkit versions for Firefox and Safari.
• It is possible to make rounded corners work in earlier versions of Internet Explorer. I use CSS3 Pie to make this happen. I will explain that another day. It is simple enough to get to work (although you may need to read the forum for some help.) Check out the link if you want to try it. If you don’t use CSS3Pie or another method of showing rounded corners, IE users will just get regular rectangles instead. It is best to make sure your design still works with the rectangles, since many users still are using IE. It is generally considered fine to allow your site to look different in different browsers. This is called “graceful degradation” or “progressive enhancement” depending on how you look at it. Twitter is a good example of a web site that uses this philosophy. All of the rounded corners are just regular rectangles when viewing the web-site with IE, and it looks fine and professional without them.