askvity

How to round the corners of an image in CSS?

Published in CSS Image Styling 4 mins read

To round the corners of an image in CSS, you primarily use the border-radius CSS property.

The border-radius CSS property allows you to create rounded corners on an element's background. When applied to an image element (like an <img> tag or an element with a background image), it clips the image to fit within the rounded shape defined by the radius.

Understanding border-radius

The border-radius property accepts values in pixels (px), percentages (%), or other CSS length units.

  • Using pixel values: You can specify a fixed radius for the corners.
    • Example: border-radius: 75px; will apply a 75-pixel radius to all four corners. You can experiment with different values to get the way you like.
  • Using percentage values: Percentage values are based on the dimensions of the element itself.
    • Example: border-radius: 10%; will apply a radius that is 10% of the element's width/height (depending on the corner).

Making an Image a Circle

As noted in the reference, to make an image a perfect circle (assuming the image is already a square), you can use a border-radius of 50%.

  • Example: border-radius: 50%; will create a circle.

Important Note: For border-radius: 50%; to result in a perfect circle, the image element itself should be a perfect square (equal width and height). If it's rectangular, border-radius: 50%; will create an oval.

Applying border-radius to an Image

You can apply the border-radius property to your image element using CSS selectors.

Here’s a basic example targeting an <img> tag:

img {
  border-radius: 20px; /* Rounds all corners by 20 pixels */
}

Or using a CSS class for more control:

<img src="your-image.jpg" alt="Description" class="rounded-image">
.rounded-image {
  border-radius: 15px; /* Apply 15px radius to this specific image */
  width: 200px; /* Optional: set a specific width */
  height: auto; /* Optional: maintain aspect ratio */
}

.circular-image {
  border-radius: 50%; /* Make it a circle */
  width: 150px; /* Make sure width and height are equal */
  height: 150px;
  object-fit: cover; /* Optional: ensures image covers the circular area without distortion */
}

Controlling Individual Corners

The border-radius property is a shorthand for four individual properties:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

You can use these to round specific corners:

.custom-rounded-image {
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  /* The other two corners will be square */
}

Alternatively, you can use the border-radius shorthand with multiple values:

Number of values Applies to Example
1 value All four corners are rounded equally. border-radius: 20px;
2 values Top-left and bottom-right get the first value; Top-right and bottom-left get the second value. border-radius: 10px 30px;
3 values Top-left gets the first; Top-right and bottom-left get the second; Bottom-right gets the third. border-radius: 10px 30px 50px;
4 values Top-left, Top-right, Bottom-right, Bottom-left (in that order). border-radius: 10px 20px 30px 40px;

This allows for highly customized rounded shapes.

Practical Tips

  • Maintain Aspect Ratio: When creating circles (border-radius: 50%;), ensure your image container or the image itself has equal width and height. Using object-fit: cover; can help handle non-square source images within a square container.
  • Experiment: The best way to achieve the desired look is to experiment with different border-radius values (px or %).
  • Performance: border-radius is generally very performant and doesn't impact page load significantly.

By using the border-radius property, you can easily add elegant rounded corners or create circular shapes for your images in CSS.

Related Articles