CSS：使用边框半径将边框与圆角元素合并

Question

我得到了一个看起来像这样的模型：

有没有办法可以在不使用CSS3的情况下使用图像？具有圆角的边框边界似乎是不可能的......具有圆形底部边框的灰色背景的部分似乎也使事情变得更加困难，因为否则它可能没有边框。请注意，当它们组合在一起时边界不应该更宽，它们应该是2px到处都是。

Answer 1

使用负边距！ demo

HTML

<section>
    <h1>Header</h1>
    content
</section>

CSS

section, h1 {
    border: 2px solid #c0c0c0;
    border-radius: 10px;
    padding: 8px;
}

h1 {
    background: #e0e0e0;
    margin: -10px;
    margin-bottom: 8px; 
}

Answer 2

另一个：http://jsfiddle.net/zv3tw/1/; - ）

这里我已经将左下角和右下边框包含在你的模拟中不是圆角。

#container
{
    border:1px solid #666;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    height:120px;
}

#header{
    height:30px;
    background: #ccc;
    border-bottom:1px solid #666;
}

#header, #container
{
    border-radius: 5px;
}

Answer 3

我做了一个例子here。边框是黑色的，因为#ccc很难看到圆角。

HTML

<div id="outer">
    <div>Content</div>
</div>

CSS

div#outer
{
    border: 1px solid #000;
    height: 200px;
    -moz-border-radius: 5px;
}

div#outer div
{
    border-bottom: 1px solid #000;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    background: #eee;
    font: 10px verdana, sans-serif;
    padding: 5px;
}