Negative Rounded Corners Menu

NegativeRounded

<ul class="selectable">
    <li>
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
    <li class="active">
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
    <li>
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
    <li>
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
</ul>
<div class="right">
    <div class="content">This is content</div>
</div>

<!-- CSS Start -->

<style>
ul.selectable {
    padding-top: 1em;
    padding-bottom: 1em;
    width: 50%;
    float: left;
}
ul.selectable li {
    margin: 0 3em 0 4em;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
}
ul.selectable li.active {
    margin-right: 0;
}
ul.selectable li.active dl {
    background-color: #4f9ddf;
}
ul.selectable li dt {
    background-color: #dfd24f;
    padding: 1em;
    margin-left: -2em;
    margin-right: -2em;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
ul.selectable li dd {
    padding: 0.25em;
    background-color: #fff;
}
ul.selectable li.active dt {
    background-color: #4f9ddf;
    margin-right: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -khtml-border-top-right-radius: 0;
    -khtml-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
ul.selectable li.active dd.top {
    -webkit-border-bottom-right-radius: 8px;
    -khtml-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    border-bottom-right-radius: 8px;
}
ul.selectable li.active dd.bot {
    -webkit-border-top-right-radius: 8px;
    -khtml-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    border-top-right-radius: 8px;
}
div.right {
    float: left;
    padding-top: 3em;
    width: 50%;
}
div.content {
    height: 15em;
    width: 80%;
    background-color: #4f9ddf;
    padding: 1em;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
</style>