how to make an oval in css?

html css css-shapes
rachid picture rachid · Nov 16, 2014 · Viewed 45k times · Source

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.

Answer

Ali Aboussebaba picture Ali Aboussebaba · Nov 16, 2014

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>

Related questions

Easier way to create circle div than using an image?

I'm wondering if there's an easier way to create circular divs than what I'm doing now. Currently, I am just making an image for each different size, but it's annoying to do this. Is there anyway using CSS to make …

Read More
CSS Progress Circle

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%. I would like it to stop at certain percentages like in the screenshot below. …

Read More
How to use CSS to surround a number with a circle?

I would like to surround a number in a circle like in this image: Is this possible and how is it achieved?

Read More