how to make an oval in css?

B

8

41

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.

Brusquerie answered 16/11, 2014 at 19:39 Comment(0)

F

46

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>

Fratricide answered 16/11, 2014 at 19:48 Comment(0)

S

6

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>

Styliform answered 16/11, 2014 at 19:44 Comment(0)

H

1

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

Hakodate answered 16/11, 2014 at 19:44 Comment(0)

T

1

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.

Turku answered 16/11, 2014 at 19:45 Comment(0)

L

1

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

Longwood answered 16/11, 2014 at 19:45 Comment(0)

C

1

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>

Cacuminal answered 16/11, 2014 at 19:50 Comment(0)

D

1

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

Distemper answered 28/5, 2016 at 19:8 Comment(0)

F

0

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

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

Farrison answered 15/11, 2022 at 3:51 Comment(0)

Recommended topics

Hot tags