Border-radius property in CSS

The border-radius property in CSS is used to round the corners of an element's outer border edge. This property can be used to create elements with rounded corners, circles, or ellipses.

Syntax

border-radius: [value];

Where [value] can be one or more of the following:

• Length (e.g., px, em, rem, etc.): Specifies the radius in fixed units.
• Percentage (%): Specifies the radius as a percentage of the element's dimensions.

Single Value

If you provide a single value, it will apply to all four corners.

<style>
/* Example: Rounded corners with a radius of 10px */
div {
height:100px;
width:100px;
border 1px solid red;
background-color: blue;
border-radius: 10px;
}
</style>
<div></div>

Two Values

When two values are provided, the first value applies to the top-left and bottom-right corners, and the second value applies to the top-right and bottom-left corners.

<style>
/* Example: Elliptical rounding */
div {
height:100px;
width:100px;
border 1px solid red;
background-color: blue;
border-radius: 10px 20px;
}
</style>
<div></div>

Four Values

When four values are provided, they apply to the top-left, top-right, bottom-right, and bottom-left corners in that order.

<style>
/* Example: Different rounding for each corner */
div {
height:100px;
width:100px;
border 1px solid red;
background-color: blue;
border-radius: 10px 20px 30px 40px;
}
</style>
<div></div>

Individual Border Corners

CSS allows you to specify each corner's radius individually using specific properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

<style>
/* Example: Individual corners */
div {
height:100px;
width:100px;
border 1px solid red;
background-color: blue;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
</style>
<div></div>

Creating a Circle

To create a perfect circle, the element should have equal height and width, and the border-radius should be set to 50%.

<style>
/* Example: Circle */
div {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%;
}
</style>
<div></div>

Creating an Ellipse

If you want to create an ellipse, the width and height should differ, but the border-radius should still be 50%.

<style>
/* Example: Ellipse */
div {
    width: 150px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}
</style>
<div></div>

Summary