Question

I got a mockup for something that looks like this:

Is there a way I can make this without using images using CSS3? The border-around-a-border thing with rounded corners seems to be not possible to do… The part with the gray background having rounded bottom borders seems to also make things more difficult, since otherwise it could just not have borders. Note that the border should not be any wider when they come together, they are supposed to be 2px everywhere.

Answer 1

Use negative margins! 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; 
}