How to Make an Ellipse in CSS – A Simple Shape with Powerful Design Uses

Ellipses are elegant and practical — they can represent profile pictures, bubbles, decorative elements, and more. With pure CSS, you can easily create a perfect ellipse (oval shape) without using images or SVG.

In this blog post, we’ll show you how to make an ellipse in CSS, step-by-step, with multiple use cases and tips.

---

✅ What Is an Ellipse?

An ellipse is an oval shape — a stretched or squashed circle. In CSS, it’s made using the border-radius property on a rectangular or square element.

---

🛠️ Basic Method: Use border-radius

The key property to create an ellipse in CSS is:

border-radius: 50%;

This rounds the corners of a box. When the element is not square, it becomes an ellipse.

---

🎯 Example: Simple Horizontal Ellipse

<style>
  .ellipse {
    width: 200px;
    height: 100px;
    background-color: #007bff;
    border-radius: 50%;
  }
</style>

<div class="ellipse"></div>

✅ Result: A blue ellipse with a width of 200px and height of 100px.

---

🎯 Example: Vertical Ellipse

<style>
  .ellipse-vertical {
    width: 100px;
    height: 200px;
    background-color: #28a745;
    border-radius: 50%;
  }
</style>

<div class="ellipse-vertical"></div>

✅ Result: A tall green ellipse — great for decorative backgrounds or icons.

---

🎯 Ellipse with Text Inside

<style>
  .text-ellipse {
    width: 250px;
    height: 120px;
    background: #ffc107;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #333;
  }
</style>

<div class="text-ellipse">Hello, Ellipse!</div>

✅ The text is centered inside the ellipse using Flexbox.

---

🌀 Advanced: Ellipse with Gradient and Shadow

.ellipse-fancy {
  width: 180px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #ff8a00, #e52e71);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

This creates a stylish, colorful ellipse with depth and lighting effects.

---

💡 Pro Tips

• Always use border-radius: 50% for ellipses.
• Use different width and height to stretch it horizontally or vertically.
• Combine with display: flex to center content inside.
• Use background-image or gradients for more visual interest.

---

🧪 Bonus: Ellipse with Outline Only

.ellipse-outline {
  width: 150px;
  height: 80px;
  border: 3px solid #555;
  border-radius: 50%;
  background: none;
}

✔️ Useful for wireframes, diagrams, or minimal UI elements.

---

❌ Common Mistake

Avoid using border-radius without changing height/width — you’ll just get a circle.

width: 100px;
height: 100px;
border-radius: 50%; /* This is a circle, not an ellipse */

To make an ellipse, the width and height must be unequal.

---

🔚 Conclusion

Creating an ellipse in CSS is simple, flexible, and doesn’t require any extra images or code. By combining border-radius: 50% with unequal width and height, you can generate smooth, responsive ellipses for any design need — from avatars to decorative shapes.

---

📌 Quick Recap

Feature	CSS Value
Shape	border-radius: 50%
Horizontal shape	width > height
Vertical shape	height > width
Ellipse w/ text	Use Flexbox to center text
Stylish ellipse	Add gradient + box-shadow