CSS – Rounded Corners for Image

To set rounded corners for image using CSS, set border-radius with required value for curvature of the corner.

A quick syntax to set border-radius for image is

</>
Copy
img {
    border-radius: 25px;
}

Refer CSS border-radius tutorial.

Example

In the following example, we set rounded corners for image using border-radius.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img {
            width: 250px;
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <img src="/sample_image.jpg">
</body>
</html>

We can also set the border-radius with a percentage value.

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img {
            width: 250px;
            border-radius: 20%;
        }
    </style>
</head>
<body>
    <img src="/sample_image.jpg">
</body>
</html>

To get an eclipse or circular shape, set border-radius with 50%.

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img {
            width: 250px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="/sample_image.jpg">
</body>
</html>

Conclusion

In this CSS Tutorial, we learned how to set rounded corners for image using border-radius, with CSS examples.