CSS
How to Make an Ellipse in CSS — A Quick and Simple Guide
Creating shapes with CSS is a powerful way to enhance your website’s design without relying on images or graphics. One commonly used shape is the ellipse — perfect for profile pictures, buttons, background elements, and more.
In this guide, we’ll show you exactly how to make an ellipse in CSS, with real examples and customization tips.
🎯 What is an Ellipse in CSS?
An ellipse is simply an oval shape. In CSS, you can create it using the border-radius
property by setting different horizontal and vertical radii.
✅ Basic Ellipse Using border-radius
To create a horizontal ellipse:
<div class="ellipse"></div>
.ellipse {
width: 200px;
height: 100px;
background-color: #4CAF50;
border-radius: 50% / 50%;
}
📝 Explanation:
width: 200px;
andheight: 100px;
define the size.border-radius: 50% / 50%;
makes it perfectly oval.
🔄 Vertical Ellipse Example
.ellipse-vertical {
width: 100px;
height: 200px;
background-color: #FF5733;
border-radius: 50% / 50%;
}
The shape is still an ellipse, but stretched vertically.
🎨 Customizing the Ellipse
You can create more abstract ellipses by adjusting the border-radius
manually:
.custom-ellipse {
width: 180px;
height: 100px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
border-radius: 70% / 40%;
}
This gives you more control over how flat or round the shape appears.
🖼️ Use Case: Elliptical Profile Picture
<img src="profile.jpg" class="ellipse-img">
.ellipse-img {
width: 120px;
height: 80px;
object-fit: cover;
border-radius: 50% / 50%;
}
This gives a neatly cropped elliptical avatar image.
💡 Tips
- Always use
border-radius: 50% / 50%
for symmetrical ellipses. - The shape depends on the
width
vs.height
ratio. - Use gradients or shadows to make ellipses visually appealing.
🚀 Conclusion
Creating an ellipse in CSS is simple yet powerful. Whether you’re designing buttons, cards, or profile images, knowing how to control shapes with CSS gives you more creative flexibility — no SVG or image files needed.