how to make an oval in css?

I want to make an oval like:

But when i used this code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <style type="text/css">
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 40px;
            }
        </style>
    </head>
    <body>
        <div class="oval"></div>
    </body>
</html>

It gives me this:

To make a circle it works, but an oval not.

Ali Aboussebaba

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%;
}

<div class="oval"></div>

web-tiki

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%;
 }

<div class="oval"></div>

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

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.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <style type="text/css">
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div class="oval"></div>
    </body>
</html>

An other way of thinking is explained here.

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;}

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

.oval {
  width: 10px;/*change here*/
  height: 157px;/* or here if you want to be more sharper*/
  border-radius: 50%;
  background: #1abc9c;
}

<div class="oval"></div>

If you want more shapes, you can generate these using

http://enjoycss.com/code/

来源：https://stackoverflow.com/questions/26961221/how-to-make-an-oval-in-css

标签

html

css

css-shapes