CSS Rounded Corners

CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.A simple syntax of rounded corners is as follows −

The CSS border-radius property can be used to give HTML elements rounded corners. Most commonly, the property is seen using only one value, but it actually will take up to four values.

CSS border-radius Property

The border-radius CSS property lets you round the corners of an element's outer border edge. You can specify a single radius to make circular corners, or two radii to make elliptical corners.

The CSS border-radius property defines the radius of an element's corners.

The border-radius properties work by curving the corner according to a circle with its center offset from the corner of the box by the distance you specify. To create a simple box with rounded corners, add the border-radius property to box1.

Example -

The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

CSS border-radius - Specify Each Corner

Example -

You could also create elliptical corners:

Example -

CSS Rounded Corners Properties

ValuesDescription
border-radiusUse this element for setting four boarder radius property
border-top-left-radiusUse this element for setting the boarder of top left corner
border-top-right-radiusUse this element for setting the boarder of top right corner
border-bottom-right-radiusUse this element for setting the boarder of bottom right corner
border-bottom-left-radiusUse this element for setting the boarder of bottom left corner