CSS3 Rounded Corners

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;

rounded corners

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;

rounded corners

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.

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>