Rectangle with oval bottom

Question

Is it possible to create a flat oval that will be as round as the example below?

I looked at a few examples of how to create the oval itself using CSS from the following sources:

• http://css-tricks.com/the-shapes-of-css/
• http://jsfiddle.net/QGtzW/1/

Unfortunately, as you lower it in height, the oval simply does not want to maintain a rounded shape. Here is my current code on how I am trying to achieve the same visual look as the image above:

HTML

<ul>
<li>
<a href="#">
<span class="text">Home</span>
<span class="oval"></span>
</a>
</li>
</ul>

CSS

a {
    position: relative;
    padding: 10px 30px 0px 30px;
    text-transform: uppercase;
    background-color: red; color: #fff;
}
.text {
    position: relative;
    z-index: 1;
}
.oval {
    position: absolute;
    bottom: -8px; left: 0;
    z-index: 0;
    display: block;
    width: 100%; height: 20px;
    border-radius: ~"20px/10px"; /* I'm using LESS and it requires ~"" to make it work */
    background-color: red;
}

---

As a thank you to everyone here and as a help to anyone in the future, here is my last code:

HTML

<ul>
    <li>
        <a href="#">Home</a>
    </li>
</ul>

CSS

a {
        overflow: hidden;
    position: relative;
    padding: 10px 30px 20px 30px;
    text-transform: uppercase;
    color: #fff;

    &:before {
        content: '';
        position: absolute;
            top: 0; left: -25%; bottom: 4px;
            z-index:-1;
        width: 150%;
        border-bottom-left-radius: 100%;
            border-bottom-right-radius: 100%;
        background-color: #AECE33;
            border: 3px solid #6B6A65; border-top: 0;
    }
}

Answer 1

:

DEMO

:

HTML:

<div>Home</div>

CSS:

div {
    position:relative;
    width:40%; height:100px;
    overflow:hidden;
    margin:10px auto;
    text-align:center;
    font-size:1.8em;text-transform:uppercase;line-height:90px;color:#fff;
}
div:before {
    content:'';
    position:absolute;
    top:0; left:-25%; bottom:4px;
    width: 150%;
    background-color: #AECE33;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border:4px solid #6B6A65;
    border-top:0;
    z-index:-1;
}

Answer 2

DEMO1

.cover{ height:100px; width:300px; overflow:hidden;}
.set {
    background-color: #80C5A0;
    width: 400px;
    height: 100px;
    margin-left:-50px;
    border-radius: 50% / 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

<div class="cover">
    <div class="set"></div></div>

,

DEMO2

, , DEMO3

Answer 3

Try this CSS

div {
background-color: #80C5A0;
width: 400px;
height: 100px;
-webkit-border-radius:  100% 100% 100% 100% / 0% 0% 100% 100%;
 border-radius: 100% 100% 100% 100% / 0% 0% 100% 100%;
}

jsfiddle