Rounded corners in a css table-cell layout?

Question

I need some help with my design. I want to display three equal-height boxes next to each other, like this ASCI art:

+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+

I also have an example online (with all the CSS).

The contents of the boxes varies in height. The tricky thing is that these boxes also need to have rounded corners. For that I am using the "sliding doors" technique. Basically, the markup of a box is something like this:

<div class="box">
  <div class="box-header">
    <h4>header</h4>
  </div>
  <div class="box-body">
    <p>Contents</p>
  </div>
</div>

Four block elements so I can make rounded corners and borders with background images. The top-right corner goes on the h4. The top left corner goes on the box-header. The bottom-right corner goes on the outer box div and the bottom-left corner goes on the box-body.

I am using CSS display:table-cell to make all three boxes of equal height, but here my problem starts. All the box elements are now of equal height, but the box-body elements are not of equal height because the contents are not of equal height. Result: The bottom-right corners are not in the correct position. See also the link I posted.

How can I fix that? All the box divs are equal in height now. I would like box-body to expand to use all available height, even when the content is short. I tried height:100% but that doesn't work. How can I make that work?

Or is there an alternative way to achieve what I want? I cannot use something like faux-columns because I define the width of the boxes in ems. That means I cannot give the box div a single background image that provides both bottom corners.

Google is being absolutely useless here. Any query involving "corners" and "table" just gives me a gazillion links to 1990's tutorials that use a 3x3 table for rounded corners.

As for browser compatibility, it would be nice if IE7/8 can deal with it too but it's not required (I can replace with unequal-height floats in that case). For the website I am developing I estimate IE market share to be 20% or less. I don't care about IE6 at all.

Any tips are greatly appreciated!

Answer 1

As per my comment above, I have decided to use CSS3 border-radius to solve my problem. Using the statements below it will show rounded borders on every browser except Internet Explorer. I don't care much about IE so IE users can simply look at straight corners.

.box {
    display: table-cell;
    width: 16em;
    padding: 1em 2em;
    background: #f6c75d url(gradient.png) repeat-x scroll top left;
    border: 3px solid #de9542;
    border-radius: 25px; /* Standard */
    -o-border-radius: 25px; /* Opera 10.x */
    -moz-border-radius: 25px; /* Mozilla/Firefox */
    -icab-border-radius: 25px; /* iCab */
    -khtml-border-radius: 25px; /* KHTML/Konqueror */
    -webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */
}

In the above, gradient.png is a small tileable image that provides the gradient at the top of a box.

It works perfectly. It also simplifies the markup and the CSS, and it reduces the amount and the size of the background images that I need.

Answer 2

There is solution, which works in Safari, Firefox and Chrome. It does not work in IE, nor Opera (as far as I have tested it ― not even in 10.0b). It uses CSS3 property border-image. As it is still feature included in working draft, not recommendation, browsers implement it only with their specific prefixes:

#boxes {
    display: table;
    border-spacing: 1em;
}
.box-row { display: table-row; }
.box {
    width: 16em;
    display: table-cell;
    padding-right: 2em;
    border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine
    -o-border-image: url(box.png) 6 8 6 8 stretch;
    -khtml-border-image: url(box.png) 6 8 6 8 stretch;
    -icab-border-image: url(box.png) 6 8 6 8 stretch;
    -webkit-border-image: url(box.png) 6 8 6 8 stretch;
}

Using it would actually need you to recreate background image, but it's a detail.