CSS - Rounded Corners

CSS rounded corners are created using theborder-radiusproperty. This property allows you to specify the radius of the corners of an element’s outer border edge.

Possible Values

• <length>: Size of circle radius is denoted, using length values. Negative values are not valid.
• <percentage>: Size of circle radius is denoted, using percentage values.Horizontal axis percentage is referred to the width of the box.Vertical axis percentage is referred to the height of the box.Negative values are not valid.

Applies to

All the HTML elements, except for table andinline-tableelements withborder-collapseset to collapse. Applies to::first-letter.

DOM Syntax

object.style.borderRadius = "length";

The following diagram demonstrates the different border-radius corners for reference:

The following table shows the possible values for rounded corners as follows −

ValueDescriptionradiusIs a <length> or a <percentage> that sets the radius for all four corners of the element. It is used only in the one-value syntax.top-left and bottom-rightIs a <length> or a <percentage> that sets the radius for the top-left and bottom-right corners of the element. It is used only in the two-value syntax.top-right and bottom-leftIs a <length> or a <percentage> that sets the radius for the top-right and bottom-left corners of the element. It is used only in the two- and three-value syntaxes.top-leftIs a <length> or a <percentage> that sets the radius for the top-left corner of the element. It is used on three and four value syntaxes.top-rightIs a <length> or a <percentage> that sets the radius for the top-right corners of the element. It is used only in the four-value syntax.bottom-rightIs a <length> or a <percentage> that sets the radius for the bottom-right corners of the element. It is used only in the three and four-value syntaxes.bottom-leftIs a <length> or a <percentage> that sets the radius for the bottom-left corners of the element. It is used only in the four-value syntax.

Individual border radius properties, such asborder-top-left-radius, cannot inherit from their parent element. Instead, you must use the individual longhand properties to set the border radius of each corner.

CSS Border Radius - Length Value

The following example demostrates how to use theborder-radiusproperty to create rounded corners for all four corners of a box −

You can use theborder-radiusproperty to create rounded corners on box, borders, and images.

Here is an example −

You can use theborder-radiusproperty to create different rounded corner styles on an element.

Here is an example −

CSS Rounded Corner Images

You can use theborder-radiusproperty to create different rounded corner styles on elements.

Here is an example −

We can create a circle and an ellipse using the CSSborder-radiusproperty.

Here is an example −

CSS border-radius - Related Properties

Following is the list of CSS properties related toborder-radius:

propertyvalueborder-top-left-radiusSets the roundness of the top-left corner of an element’s border.border-top-right-radiusSets the roundness of the top-right corner of an element’s border.border-bottom-right-radiusSets the roundness of the bottom-right corner of an element’s border.border-bottom-left-radiusSets the roundness of the bottom-left corner of an element’s border.border-start-start-radiusSets the roundness of the block-start and inline-start corner of an element’s border.border-start-end-radiusSets the roundness of the block-start and inline-end corner of an element’s border.border-end-start-radiusSets the roundness of the block-end and inline-start corner of an element’s border.border-end-end-radiusSets the roundness of the block-end and inline-end corner of an element’s border.