CSS to create curved corner between two elements?

Question

My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I\'d like to have a curved outer corner

Answer 1

I came up with a solution that requires less markup. In summary, instead of using margins it uses white rounded borders, then we position the active li behind the white rounded borders to achieve the inverted border-radius effect.

http://jsfiddle.net/zrMW8/

    

        Title
    
    

        Title
    
    

        Title
    
    

        Title
    


    
This is content

And less CSS too! (this is mind bending):

a { color: #000; text-decoration: none;}

ul.selectable {
    padding: 1em 1em;
    width: 40%;
    float: left;
}

ul.selectable li {
    margin:  -1em 0 0 0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border: solid #fff 1em;
    position: relative;
}

ul.selectable li a {
   background-color: #dfd24f;
    padding: 1em;
    display: block;
       border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
}

ul.selectable li.active {
    margin: -1em -1em -1em 1em;
    border: solid #4f9ddf 1em;
    border-left: solid #fff 1em;
    background-color: #4f9ddf;
    position: static;
}

ul.selectable li.active a {
    margin: 0 0 0 -1em;
    border-left: solid #4f9ddf 1em;
    background-color: #4f9ddf;
    position: static;
    text-indent: -1em;
}

div.right {
    float: left;
    padding-top: 3em;
    width: 50%;
    margin-left: -1em;
}
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;
}

To tell you the truth I'm not sure it's a better version, it does make gradient/image backgrounds easy (for non active li's, at least) but you can't apply an image/gradient background to the body. It's also "bad magic" en the sense that it works in a non-intuitive way.