How To Make An Oval In Css?

Question

I want to make an oval like: But when i used this code:

Solution 1:

All you have to do is to change border-radius: 40px to border-radius: 50%.

.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}

<divclass="oval"></div>

Solution 2:

You need to set the border radius in percentage :

Percentage : Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

source : MDN

For a detailed explanation of why pixel values for border-radius can't output an oval shape see Border-radius in percentage (%) and pixels (px)

Example :

border-radius: 50%;

.oval {
   width: 160px;
   height: 80px;
   background: #a84909;
   border-radius: 50%;
 }

<divclass="oval"></div>

Solution 3:

use a percentage as border radius, like: border-radius: 50%;.

Solution 4:

Try this:

.oval {
            width: 160px;
            height: 80px;
            background: #a84909;
            moz-border-radius: 80px / 40px;
            webkit-border-radius: 80px / 40px;
            border-radius: 80px / 40px;
            }

PS. I do not have the compiler in front of me so there may be some minor error.

Solution 5:

All the previous answers, He doesn't want a circle according to his question. He wants an Oval. This works but there is probably a better way.

#oval{position:relative;background-color:green;width:20px;height:100px;  
  display:inline-block;z-index:100;
  }
#one{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:100px;}
#two{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:-100px;}

<divid="one">&nbsp;</div><divid="oval">&nbsp;</div><divid="two">&nbsp;</div>

Learn Html5