• Tweet

We can create nice rounded corners without using any images or JavaScript with CSS3 by using the property border-radius.
The basic use of border-radius is:

border-radius: 10px;

We can use % as well, for example:

border-radius: 10%;

However, as we need to add the vendor prefixes at the moment, we can use this property as following:

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

Examples of rounded corners using border-radius property

Following are some examples of using border-radius property.

Equal border-radius for all corners

If only one value is specified to boder-radius, it will set equal radius to all corners.

#box1{
	/*General box properties*/
	background-color:#7AE840;
	width: 200px;
	padding:10px;
	margin:20px;
	height:50px
	/* using border-radius */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

Output of the above code is:

The border-radius on top-left and bottom-right corners

The border-radius property accepts two values as well. In case of setting two values, it works from top-left to top-right and bottom-right to bottom-left.

#box2{
	/*General box properties*/
	background-color:#7AE840;
	width: 200px;
	padding:10px;
	margin:20px;
	height:50px
	/* using border-radius */
	-webkit-border-radius: 24px 0;
	-moz-border-radius: 24px 0;
	border-radius: 24px 0;
	}

The output of above code is:

The border-radius on top-right and bottom-left

Similarly, following example sets the border-radius to top-right and bottom-left corner.

#box3{
	/*General box properties*/
	background-color:#7AE840;
	width: 200px;
	padding:10px;
	margin:20px;
	height:50px
	/* using border-radius */
	-webkit-border-radius: 0 24px;
	-moz-border-radius: 0 24px;
	border-radius: 0 24px;
	}

Output:

Different border-radius for all corners

We can use shorthand form similar to that for other CSS properties such as margin and padding to set different border-radius to each corner.

#box4{
	/*General box properties*/
	background-color:#7AE840;
	width: 200px;
	padding:10px;
	margin:20px;
	height:50px
	/* using border-radius */
	-webkit-border-radius:  5px 20px 40px 60px;
	-moz-border-radius:  5px 20px 40px 60px;
	border-radius:  5px 20px 40px 60px;
	}

Output:

Tested on:

Safari 5

FF 3.6

Opera 11

Chrome 8

IE 9

I hope this tutorial was helpful. If you have any questions or suggestions, please leave a comment. Thanks.