How to Create an Ellipse in CSS?

Ellipses are widely used in modern web design, often for creating visually engaging elements like buttons, profile images, or decorative features. CSS makes it simple to create an ellipse by manipulating the border-radius property along with other standard styling techniques.

In this blog, we’ll walk through the steps to create an ellipse in CSS, explain how it works, and discuss some practical uses and customizations for ellipses in web design.

---

What is an Ellipse?

An ellipse is a shape that is like a stretched or compressed circle, where the horizontal and vertical radii (or axes) are different lengths. In CSS, you can create ellipses by adjusting the dimensions of an element and controlling how much its corners are rounded using the border-radius property.

---

How to Create an Ellipse in CSS

To create an ellipse, you primarily use two properties:

1. Width and height: These define the dimensions of your element, and their ratio determines the elliptical shape.
2. border-radius: This controls the rounding of the corners, and to make an ellipse, you set it to a percentage-based value greater than 50%.

Here’s a step-by-step guide on how to create an ellipse.

Basic Example of an Ellipse

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

.ellipse {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border-radius: 50% / 100%;
}

In this example, we’ve created an ellipse with the following characteristics:

• The width is 200px, and the height is 100px, which creates an oval shape.
• The border-radius is set to 50% / 100%, meaning the horizontal corners are rounded by 50%, and the vertical corners are rounded by 100%, forming the elliptical shape.

---

Understanding the border-radius Property for Ellipses

To better understand how to make ellipses in CSS, let’s break down the role of the border-radius property.

• Circle: If the width and height of an element are equal and the border-radius is set to 50%, the result is a perfect circle.

  .circle {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      border-radius: 50%;
  }

• Ellipse: When the width and height differ and the border-radius is set to 50% / 100%, the corners are rounded asymmetrically, producing an elliptical shape.

  .ellipse {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      border-radius: 50% / 100%;
  }

• Horizontal Ellipse: If you set the width to be significantly larger than the height, you’ll get a horizontally stretched ellipse.

  .horizontal-ellipse {
      width: 300px;
      height: 100px;
      background-color: lightcoral;
      border-radius: 50% / 100%;
  }

• Vertical Ellipse: In contrast, setting the height to be larger than the width creates a vertically stretched ellipse.

  .vertical-ellipse {
      width: 100px;
      height: 200px;
      background-color: lightgreen;
      border-radius: 50% / 100%;
  }

---

Customizing the Ellipse in CSS

1. Background Color or Image

You can style the ellipse with any background color or image. This is useful for creating profile pictures or logos.

Example with Background Image:

.ellipse-image {
    width: 200px;
    height: 100px;
    border-radius: 50% / 100%;
    background-image: url('your-image.jpg');
    background-size: cover;
    background-position: center;
}

2. Adding a Border

Adding a border to an ellipse can make it stand out more or match your design scheme.

Example with Border:

.ellipse-border {
    width: 200px;
    height: 100px;
    border-radius: 50% / 100%;
    background-color: lightblue;
    border: 5px solid darkblue;
}

3. Using Gradients

CSS gradients can add depth or visual interest to your ellipses. This works great for buttons, icons, or backgrounds.

Example with Gradient:

.ellipse-gradient {
    width: 200px;
    height: 100px;
    border-radius: 50% / 100%;
    background: linear-gradient(45deg, lightblue, lightgreen);
}

4. Shadows for 3D Effect

You can apply a shadow to the ellipse to give it a 3D look or add subtle depth.

Example with Box Shadow:

.ellipse-shadow {
    width: 200px;
    height: 100px;
    border-radius: 50% / 100%;
    background-color: lightblue;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

---

Practical Uses for Ellipses in Web Design

Elliptical shapes are versatile and can be used in various ways in web design. Here are a few common uses:

1. Profile Pictures and Avatars

Elliptical or circular shapes are often used for profile pictures in user interfaces. Simply applying the techniques discussed, you can create a responsive, attractive avatar.

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url('profile-picture.jpg');
    background-size: cover;
    background-position: center;
}

2. Buttons

Elliptical buttons with rounded edges can enhance the design of a form or CTA (Call-to-Action) button.

.ellipse-button {
    padding: 10px 20px;
    background-color: lightblue;
    border-radius: 50px / 25px;
    color: white;
    border: none;
    cursor: pointer;
}

3. Decorative Elements

Ellipses are perfect for decorative elements, like animated loaders, icon backgrounds, or abstract shapes that add interest to the page.

---

Best Practices for Creating Ellipses in CSS

• Responsive Design: When creating ellipses, ensure that your CSS is responsive. You can use percentage-based widths and heights, or media queries to adjust the shape on smaller screens.
• Performance: CSS ellipses are highly performant because they don’t require images or additional assets. They rely on simple CSS properties, making them fast to load and render.
• Accessibility: When using ellipses for functional elements like buttons or interactive icons, always make sure they are accessible. Ensure there is enough color contrast and consider adding focus styles for keyboard users.

---

Conclusion

Creating an ellipse in CSS is a straightforward yet powerful technique for adding visually engaging shapes to your web designs. By manipulating the border-radius, width, and height properties, you can easily create elliptical shapes that can be customized with colors, gradients, borders, and more.

To recap:

• Use the border-radius: 50% / 100% rule to create an ellipse.
• Customize the ellipse with background colors, images, borders, and shadows.
• Ellipses are great for creating profile pictures, buttons, or decorative elements in modern web design.

By following these tips, you can make effective use of ellipses in your designs, enhancing both aesthetics and user experience.