How to Make Rounded Image Corners in CSS?

Rounded image corners are used to enhance the visual appeal, making images look more smooth and attractive. To make rounded corners on an image, the border-radius property is used.

Using border-radius Property

The border-radius property in CSS is used to create rounded corners for the image. By setting the border-radius property value to 50px or another value, we can make a circular shape for the corners of the image.

Syntax

.image {
    border-radius: value;
}

Example 1: Using border-radius property with value 50px to make a rounded corners.

<h3>Using border-radius Property</h3>

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240222094205/js11.jpg" 
     width="300px" height="auto" 
     style="border-radius: 50px;">

Output

Example 2: The top-left and bottom-right corners of an image can be rounded using border-radius values.

<h3>Using Specific border-radius Properties</h3>
    
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240222094205/js11.jpg"
     width="300px" height="auto" 
     style="border-top-left-radius: 40px; border-bottom-right-radius: 50px;" />

Output