CSS3 Rounded Corners

CSS3 Rounded Corners

CSS3 rounded corners property is used to create rounded corners of a rectangle HTML element or square HTML element.

Border Radius

The border-radius property is used to round the corner of an HTML element's outer border edge. To make a circular corner use a single border-radius value while to make elliptical corners, assign two radii values to the border radius to make an elliptical corner.

The border-radius is shorthand for It is the shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

Border Radius Values:

Followings are the border radius values: length(in px,em,ex,vw,rem,mm,cm,in,ex,ch etc),%, inherit ,initial,unset

CSS3 Border Radius Properties

Property Description
border-top-left-radius: To set the border-radius for the top-left corner.
border-top-right-radius: To set the border-radius for the top-left corner.
border-bottom-right-radius: To set the border-radius for the bottom-right corner.
border-bottom-left-radius: To set the border-radius for the bottom-left corner.

CSS Border Radius Specification

The border-radius property of CSS has one to four values.Let us discuss the basic rule regarding border-radius values.

Case 1:border-radius has 1 value

If border-radius has only one value such as border-radius:10px; then this value will be applied to all four corners.That will be rounded all corners equally.

Source Code

Try it now

Case2:border-radius has 2 value

If the border-radius has two values such as border-radius:15px 25px; then the first value will be applied to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners.

Short Hand

Source Code

Try it now

Case3:border-radius has 3 value

If border-radius has three value such as border-radius:15px 35px 45px; then first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner.

Short Hand

Source Code

Try it now

Case4:border-radius has 4 value

If border-radius has three value such as border-radius:15px 35px 45px 50px; first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner.

Source Code

Try it now

Code Explanation

Border Radius Browser Compatibility

Chrome, Safari, Firefox 4, Opera 11, and IE9 support border-radius without any vendor prefix.