How to draw an ellipse with CSS using box-radius?

In my previous post, How to draw circle with CSS, we saw drawing of circle using CSS box-radius style. In this post I will show another aspect of syntax of box-radius style to draw an ellipse. An oval shape is ellipse which has major-axis length idfferent from minor-axis. In previous post I only used one value for box-radius.

box-radius Syntax

box-radius: horizontalRadius / verticalRadius

For simplicity sake I have only used one value. As you can see there are two components of border-radius to control radius along horizontal and vertical direction. If you do not specify vertical radius value, browser will use horizontal radius value for vertical radius as well.

Draw Ellipse

Based on the above information about syntax, to draw ellipse we need to specify different values for horizontal and vertical radius. Here is what you will need to draw ellipse.

• DIV that has height different than width. Depending on shape of ellipse you want, height may be more or less than width.
• horizontalRadius value of border-radius will be half of width of DIV
• verticalRadius value of border-radius will be half of height of DIV

Here is an example of style example I used to draw an ellipse using CSS.

.ellipseDiv { height:50px; width:100px; border: 2px solid #005; border-radius:50px / 25px; background-color:#EE5D20; }