How to give a div oval shape?

css, css-shapes

Solution

Is this OK ?

HTML

<div id="oval_parent">
    <div id="oval"></div>
</div>

CSS

#oval_parent{
    background:black;
    width:200px;
    height:120px;
    overflow:hidden;
}

#oval{
    width: 220px;
    height: 100px;
    margin:10px 0 0 -10px;  
    background: white;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

DEMO.

Problem

I tried a lot on oval shape which have cut in both sides but not able to do it please I need code for oval shape with cut in both side.. Here's my code below:- ``` .demo{ width: 100%; height: 600px; background: white; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 178px; border-radius: 694px / 208px; z-index: 100; position: relative; } ```

Original source

Related problems