Is the border radius property in CSS what makes an image appear oval?

The border-radius property in CSS is indeed used to create rounded corners on elements, including images. However, it's not the sole factor determining whether an image appears oval. The shape achieved depends on how border-radius is applied in combination with the element's dimensions.

Here’s a detailed explanation:

1. Equal Border-Radius Values:

When the border-radius value is applied with equal values on all sides (e.g., border-radius: 50% or border-radius: 100px), and the element is a square, the result will be a circle. In the case of an image, if the image’s height and width are equal and you apply border-radius: 50%, you get a circular image.

2. Unequal Border-Radius Values:

When border-radius is applied with varying values for different corners (or if you use the shorthand border-radius values with one, two, three, or four values), you can create different shapes. An oval shape emerges when the image’s height and width are unequal and a border-radius of 50% or a similar high percentage is used. For example, a rectangular image with border-radius: 50% will appear as an oval.

3. Combining `border-radius` with Image Dimensions:

- A square image with border-radius: 50% results in a circle.

- A rectangular image with border-radius: 50% results in an oval.

- If the border-radius value is lower, the corners will be less rounded and the image will maintain more of its original rectangular appearance, but with rounded edges.

4. Example Code:

To make an image appear as an oval, the key is to apply a border-radius of 50% (or other large value) to a rectangular image. For instance:

img {
  width: 200px; / Example width /
  height: 100px; / Example height /
  border-radius: 50%;
}

In Conclusion:

While the border-radius property is essential for creating rounded shapes, it’s the combination of this property with an image’s dimensions that produces an oval. If an image has equal width and height and you use border-radius: 50%, you will get a circle, not an oval. If the height and width differ, and the border-radius is set to 50% (or similarly high value), you will get an oval shape.

Learn more about this