CODEWITHSUNDEEP
htmlcsscss-shapes
rachid
rachid

Reputation: 534

how to make an oval in css?

I want to make an oval like:

enter image description here

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:

enter image description here

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

Upvotes: 44

Views: 100718

Answers (8)

Charlie Crawford
Charlie Crawford

Reputation: 1

.oval {
  background-color: #ff0000;
  width: 200px;
  height: 100px;
  border-radius: 100px/50px;
  border: 1px solid #000000;
  position: absolute;
}
<div class="oval"></div>

Upvotes: 0

Ali Aboussebaba
Ali Aboussebaba

Reputation: 1162

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>

Upvotes: 48

Bogdan Alexandru Militaru
Bogdan Alexandru Militaru

Reputation: 1210

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

Upvotes: 1

web-tiki
web-tiki

Reputation: 103780

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>

Upvotes: 6

Billy
Billy

Reputation: 2448

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>

Upvotes: 1

user3522371
user3522371

Reputation: 

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

Upvotes: 1

FeliceM
FeliceM

Reputation: 4199

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.

Upvotes: 1

delbertooo
delbertooo

Reputation: 940

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

Upvotes: 1

Related Questions