Connect with us

CSS

How to Make an Ellipse in CSS — A Quick and Simple Guide

Spread the love

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; and height: 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.


Spread the love
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *