How to Draw an Ellipse using CSS?

We can take a div element and set its width and height property to make a rectangle. Then apply border-radius property on rectangular div element to convert rectangle to ellipse. By setting the border-radius to 50% and adjusting the width and height of the element, an elliptical shape can be created.

Syntax

border-radius: 10px;

Creating a Rectangle with HTML and CSS

To draw an ellipse of desired size, first, we will create a div element and give a class named as ellipse. Now we will set the height and width of the div, it will look like a rectangle.

Example: Creating a rec with HTML and CSS.

<div style="height: 100px; width: 150px; border: 2px solid grey;"></div>

Output

Create an Ellipse from Rectangle

We will set the border-radius property value to 50% on above div element to make the ellipse. The height of the rectangle will be the minor axis of the ellipse and the width will be the major axis.

Example: Creating an ellipse with HTML and CSS.

<div style="height: 100px; width: 150px; border: 2px solid grey; border-radius: 50%;"></div>

Output