CSS Border Radius

CSS border-radius property is used to define the rounded corners of an HTML element’s border. The value of the border-radius property specifies the radius of the curve at each corner of an element’s border. The higher the value of the border-radius, the more curved the corners will be.

Here’s an example of using the border-radius property to create rounded corners for an HTML element:

div {
    border: 2px solid #ccc;
    border-radius: 10px;
}

In this example, the border property is used to set a 2-pixel border with a solid style and a color of #ccc. The border-radius property is used to define a radius of 10 pixels for all corners of the border, creating a rounded corner effect.

You can also set different values for each corner of an element by using the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties.

div {
    border: 2px solid #ccc;
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 15px;
}

In this example, different values are set for each corner of the border, creating a unique curved effect.

By using the border-radius property, you can create visually appealing designs with curved borders that enhance the overall look and feel of your web page.