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; 
}