The thing is that an oval shape is created when the border-radius is applied to a rectangular image that has different width and height. So if the image width and height are unequal the border-radius will make the image look like an oval instead of a perfect circle.
This is because the border-radius is applied proportionally to both axes.
- Circle: If the width and height are the same, applying a
border-radiusof50%will give the image a perfect circular appearance. - Oval: If the width and height are different, applying
border-radius: 50%will create an oval.
Example of Creating an Oval Image
Here’s an example of how to make an image look like an oval:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oval Image Example</title>
<style>
img {
width: 300px; /* Set the width */
height: 150px; /* Set the height (different from width to create an oval) */
border-radius: 50%; /* Make the edges rounded, creating an oval */
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300x150" alt="Oval Image">
</body>
</html>
Details
- Width and Height: To create an oval, set different values for
widthandheighton the image. If both are equal, the result will be a circle. - Border-radius: Set
border-radius: 50%to make the corners round. This turns the image into a circular or oval shape depending on its aspect ratio.
Example of Creating a Circle
To turn an image into a perfect circle, make sure the width and height are the same, and apply border-radius: 50%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Image Example</title>
<style>
img {
width: 150px; /* Width and height must be the same */
height: 150px;
border-radius: 50%; /* This will make the image circular */
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/150" alt="Circle Image">
</body>
</html>
Conclusion
So, when you apply border-radius to an image, it makes the edges round. If the image’s width and height are different, it creates an oval shape. If they’re the same, it creates a circle. This technique is widely used for profile pictures and creating rounded elements for a sleek design.
