Open In App

How to draw an ellipse using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to create an ellipse using CSS. To create an ellipse first, we will create a simple rectangle of our desired height and width.

Approach To create Rectangle: In order to create an ellipse of our desired size, we will create a div in HTML and will give it a class named an ellipse. Now we will set the height and width of the div, it will look like a rectangle. We can set the background color as per our choice.

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Adding CSS to the div -->
    <style>
 
        /* Setting Height and Width of Rectangle */
        .ellipse{
            height: 100px;
            width: 150px;
            background-color: green;
        }
    </style>
</head>
 
<body>
 
    <!-- Create a div -->
    <div class="ellipse"></div>
</body>
</html>


Output:

Rectangle

Approach to Create Ellipse from Rectangle: Now to convert this rectangle into an ellipse, we will set the border-radius refers to a very high value (50% to 100%). It refers to the curvature at the corners of the ​shape. The height of the rectangle will be the minor axis of the ellipse and the width will be the major axis.

Example: In this example, we are using the above approach.

HTML




<!DOCTYPE html>
<html>
  
<head>
 
    <!-- Adding CSS to the div -->
    <style>
 
        /* Setting Height and Width of Rectangle */
        .ellipse{
            height: 100px;
            width: 150px;
            background-color: green;
 
            /* Setting Border Radius */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- Create a div -->
    <div class="ellipse"></div>
</body>
</html>


Output:

Ellipse



Last Updated : 08 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads