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.