Rounded borders - that aren't white

[Dabrowski]

I'm sure everyone has come across the problem of border with rounded corners, yes?

What do you do? Have 4 divs each with a corner image, absolutely positioned inside a relatively positioned container? There are variations but I believe that's about it. I presonally prefer 4 nested divs, but whatever.

The problem I have in this case is that the rounded corner(s) are on top of another image, so my corner images need to be coloured on the inside, and transparent on the outside. This presents the problem of the container background showing through the transparency.

Ideas on the best way to do this?

[Robin_reala]

If the box is going to be a fixed width then it’s not too hard. You’d do something like:

<div id="my_box">
<h1>My box header</h1>
<div>My content</div>
</div>

This gives you three elements to hang styles off. Assuming we’ve got two images: one for the top with the background colour and transparent cut-outs for the top to corners, the other a vertically flipped copy for the bottom.

#my_box {
background: url(my_bottom_image.png) no-repeat bottom;
padding-bottom: 20px;
}
#my_box h1 {
background: url(my_top_image.png) no-repeat top;
padding-top: 20px;
}
#my_box div {
background-color: blue;
}

See how that works? We hang the top corners on the h1, the bottom corners on the container, and colour just the content.

(as an aside, were IE at all capable of generated content then we could do the same thing with #my_box::before and #my_box::after, and ignore having to hang elements from the header)

If the box is a variable width as well as height then your problem becomes significantly more difficult. Assuming your current solution of absolutely positioning your four elements at each corner, you’d then need three elements to set background colour on. I’d do something like:

<div id="my_box">
<div class="corner1"></div>
<div class="corner2"></div>
<div class="corner3"></div>
<div class="corner4"></div>
<h1>My box header</h1>
<div>My content</div>
<p class="more"><a href="#">See more</a></p>
</div>

I’ve chosen a more link because it’s a pretty common element to have in a situation like this, but any will do. Leaving out the corner code, and assuming they’re all 20x20px, you could do something like:

#my_box h1, #my_box p.more {
margin: 0 20px;
height: 20px;
background-color: blue;
}
#my_box div {
background-color: blue;
}

I.e., lining up the <h1> and <p> directly between each pair of corners, and letting the <div> fill the rest of the space. That’s more than a little fragile though.

Of course, as I mentioned earlier in another thread, all this is academic once browsers start supporting border-radius :)

[Dabrowski]

Hehe, yes won't it be so much easier when that happens. Won't be for years though.

That's kinda how I've done it, but height is also 100% and unknown. The reason being the content in question is in an IFRAME, which incidentally makes the task slightly easier.

The background is black with a white border, and white text, so I'm using the border on the DIVs to fill in between the corners.

The corners are 20x20, but the content will overlap these, and have padding of 10x10 so less space is unnecessarily wasted.

Basically I'm using 'position: absolute' to put the borders 'under' the content, which isn't too bad, but to make up the content I'm using DIVs purely for styling, and I can't do it in less than 12, and it's all a huge mess.

I've never been great with CSS layouts.

[Xapti]

I've seen imaged borders done in this interesting way:

like 4-5 nested divs (with nothing inbetween, just "<div><div><div>"), each one has like a different background image or something, and represents one of the sides or corner of the container object. I think the order the divs are put in may also matter.
It was pretty interesting, I'm not sure if such a method would fix the type of problem you have.

[Dabrowski]

Yes that's pretty much the same as the way I normally do it and Robin_reala's solution above. The divs are just used for positioning.

I like to do it:

<div id='topleft'>
<div id='bottomright'>
<div id='topright'>
<div id='bottomleft'>

Content

</div></div></div></div>

Which works fine, if the size is unknown then wrap the whole thing in a div and take the content out of the nesting like Robin's example.

The problem here is the container(s) can't overlap the transparent corners.