CODEWITHSUNDEEP
htmlcss
Muhd
Muhd

Reputation: 25576

CSS: Merging borders with rounded elements using border radius

I got a mockup for something that looks like this:

enter image description here

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.

Upvotes: 1

Views: 2944

Answers (3)

Eric
Eric

Reputation: 97591

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

Upvotes: 5

Bojangles
Bojangles

Reputation: 101483

I've made an example here. The borders are black because the rounded corners are hard to see at #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;
}

Upvotes: 0

Jamie Dixon
Jamie Dixon

Reputation: 53989

And another: http://jsfiddle.net/zv3tw/1/ ;-)

Here I've included the bottom left and right border to be not rounded as per your mock.

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

Upvotes: 1

Related Questions