Rounded Corners with CSS3 without using Images

CSS3 makes it possible to create rounded corners without using images which not only helps minimize server requests but also improve web page opening speed and is supported by all major browsers today. Those who know the Google Page Speed tool are well aware of the fact that how important is to use less possible images in design. Using minimum possible images will increase the Google Page Speed score. Using image sprites is another smart way if its necessary to include images for the look of your design.

demo button

Property Syntax and Standards:

syntax and standard

border-radius is the standard property for creating rounded corners. Its a native CSS property which is fortunately supported by Chrome, Firefox and Safari. Main property is same but just have to put the browser supported prefix at the start of property because of browsers unique idiosyncrasies, they apply prefixes such as -moz and -webkit. Below are the standard properties for major browsers.

1
2
3
4
border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px/* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

Above properties are simple to understand. The value 10px echos for all the four corners. You can also change any corner to your desired one. This property works same like the margin or padding. You can set the value for only top right corner, top left, bottom right and bottom left corner.

1
2
3
4
/* Firefox */ -moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
1
2
/* Chrome and Safari */ -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 0;

You can combine them all in a shorthand property as well. These are described as -moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]

1
-moz-border-radius: 10px 20px 30px 0;

You need a declaration separately for all major browsers to make sure it’s 100% cross browser compatible.

Solution for Internet Explorer

Like many other properties, IE seems to be angry with this one also. Sorry MS for being pessimistic about IE. It’s being a great headache to make IE accept rounded corner property. Only IE9 understands much of CSS3 properties but still we will use a .htc hack for making rounded corner property available in all IE versions.

First download this curved-corner .htc file hosted at Google Code or download it directly at here. Host it to somewhere in theme folder and use the below properties when you need rounded corners.

1
.Corners { behavior: url(Location of border-radius.htc file); border-radius: 20px; }

Change the location to where-ever the file is hosted at your server. If you need example of how to make it work on IE, download the zip file clicking on below button.

download zip

Still after all this, there are few issues with rounded corner property in IE like positioning, fun conflict with in-line and layout elements, works only if apply same border radius to all corners, line issue when using on anything translucent and doesn’t work with combination of CSS3 shadow property. Looking at this table will help you understand the CSS3 border-radius Compliance.

Reference URL

Summary

Using CSS3 can be a handy method to add professional spunk into your design and will help in making web more faster. The roundly effect is really nice and handy to have. Frustrated developers should consider this a shadow of tree and implement this easiest method for their designs. Its fun to learn new things but using these hacks to client are never recommended but to have grip on stuff.


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


3 Comments

  1. CSS3 has brought a lot of new features for us. Prior to CSS3, it was pretty difficult to get rounded corners. In many cases, we used images at corners to achieve this effect. For getting rounded corners and many other cool effects.

  2. Ilyas says:

    Excellent work. :)

  3. Mohammad Tayyab says:

    Nice work brother…. :P :P Keep going.. :D