如何将外圆角添加到div？

Question

我希望在选定的侧边栏项目中添加"外部"圆角,以提供此项目"倾注"到内容中的效果.

在我下面的例子中,我希望它.top有一个带有灰色背景的圆角右下角,以及一个类似的右上角.bottom.你怎么看？

我正在使用Twitter Bootstrap和LESS,如果这样可以更容易.

jsFiddle:http://jsfiddle.net/3YXb2/

转过来:

进入:

标记:

<div class="wrapper">
    <div class="sidebar">
        <div class="top">
            <p>Top</p>
        </div>
        <div class="middle">
            <p>Middle</p>
        </div>
        <div class="bottom">
            <p>Bottom</p>
        </div>
    </div>
    <div class="container">
        <p>Content</p>
    </div>
</div>

CSS:

body {
    margin:10px;
}
div {
    margin:0;
    margin-right:-4px;
    padding:0;
    display:inline-block;
    vertical-align:middle;
}
.wrapper {
    width:100%;
    display:block;
    border:1px solid;
}
.container {
    background-color:gray;
    width:70%;
    height:300px;
}
.sidebar {
    background-color:white;
    width:30%;
    height:300px;
}
.middle {
    background-color:gray;
}
.top,.middle,.bottom {
    width:100%;
    height:100px;
    display:block;
}
p {
    padding:40px 0 0;
    margin:0;
    text-align:center;
}

Answer 1

Css3提供border-radius酒店.但请注意,这不适用于IE8或更低版本.有可用的黑客 ; 但他们就是这样:黑客.

用法如下:

    .sidebar {
        background-color:gray;
        width:30%;
        height:300px;
    }
    .middle {
        background-color:gray;
    }
    .top,.middle,.bottom {
        width:100%;
        height:100px;
        display:block;
    }
    .top{
        background: white;
        border-bottom-right-radius:10px;
    }
    .bottom{        
        background: white;
        border-top-right-radius: 10px;
    }

jsFiddle例子