Creating rounded corners using CSS

In CSS, the property commonly used to create rounded corners is border-radius. This property allows you to set rounded corners for all four corners of an element. You can specify a single value to apply rounded corners to all four corners simultaneously, or specify multiple values to set rounded corners for each corner individually.

Here are several ways to use border-radius:

1. Setting Rounded Corners for All Corners

css
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 10px; /* Applies 10px rounded corners to all four corners */
}

2. Setting Rounded Corners for Each Corner Individually

You can specify the rounded corner size for each corner individually, with the order typically starting from the top-left corner and proceeding clockwise:

css
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 10px 15px 20px 25px; /* Top-left: 10px, top-right: 15px, bottom-right: 20px, bottom-left: 25px */
}

3. Setting Horizontal and Vertical Radii Separately

For each corner, border-radius can also accept two values: the first is the horizontal radius, and the second is the vertical radius.

css
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 10px 20px; /* Horizontal radius: 10px, vertical radius: 20px */
}

Example: Creating a Circle

If you want to create a perfect circle using CSS, set the width and height of the element to the same value and set border-radius to 50%:

css
.circle {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%; /* Creates a circular shape */
}

These are the basic methods for creating rounded corners using the CSS border-radius property. Depending on your specific requirements, you can adjust these values flexibly to achieve the desired visual effect.