CSS: объединение границ с закругленными элементами с использованием радиуса границы

Question

У меня есть макет для чего-то похожего на это:

Есть ли способ сделать это без использования изображений с помощью CSS3? Кажется, что сделать рамку вокруг границы с закругленными углами невозможно ... Часть с серым фоном, имеющая закругленные нижние границы, также усложняет задачу, поскольку в противном случае она могла бы просто не иметь границ. Обратите внимание, что граница не должна быть шире, когда они собираются вместе, они должны быть 2px везде.

Answer 1

Используйте отрицательные поля! демо

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

Я сделал пример здесь . Границы черные, потому что закругленные углы плохо видны на #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;
}