How to design initial letter of text paragraph using CSS ?

How to Draw an Ellipse using CSS?

Last Updated : 08 Nov, 2024

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.

HTML

<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.

HTML

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

Output

How to design initial letter of text paragraph using CSS ?

portalpirate

Improve

Article Tags :

How to Draw an Ellipse using CSS?

Creating a Rectangle with HTML and CSS

Create an Ellipse from Rectangle

Similar Reads

Basics Questions

Properties Based Questions

Selectors Questions

Functions Questions

Miscellaneous Questions

Thank You!

What kind of Experience do you want to share?