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.

Answer 3

If you don't mind adding a little extra markup, you can achieve this effect. Of course I don't really advocate code-bloat, but if you must get it done, you can double-wrap the box and have the bottom corners be in one of each of the wrappers. Set the height of your inner wrapper with display: table-cell and you should be golden.

Answer 4

你能在盒体元素上使用min-height属性吗？

Answer 5

try setting the box-body to display: table-cell ? that might force it to render the three box-bodies to the same height and force the rounded borders to the bottom too.

Answer 6

I hope this gets to you (I am new to these forum posting things) As a Graphic Designer, the "squarness" of HTML is horrible. I know this is not really a fix for HTML or CSS, as it is a simple graphic solution. But it works great, and because it is a simple gif image it does not fail across browsers. The down side is that it takes time because of the trial and error and if you change the amount of content in your cell you may have to change the image used as a rounded rectangle background.

So, with that caveat...

Work out the size of the table cell you need by adding the text and measuring the cell, or looking at the image size if only an image, in pixels.

In a graphics program create a rectangle of any colour (say black if you have white text on the website etc.) This rectangle is the bottom layer.

Create a rounded rectangle, for example with a 1 pixel line thickness and NO fill colour (line colour can be any colour you choose as can thickness..) which is ABOVE the basic filled rectangle. What you will have then is a solid colour square with a thin outline with rounded corners.

I make the rounded UNfilled rectangle 10 pixels smaller (xy) then I can position it equi-distance over the square.

Export this image, say as a GIF or JPEG.

In your website, on the page click the table cell you want the rounded rectangle to be in and set it as the BACKGROUND image of just that cell. Make sure the cell is the same size as the image or it will not fit or tile... Then, because it is a BACKGROUND element to a cell, any content, text or images you put in the cell will appear above the background image making it look like you have a ROUNDED table cell.

You can if you want make the background image transparent by exporting the native image as a gif with transparency (you can use PNG with Alhpa transparency which has more colours, but I am not so sure of full browser support for the PNG image in webpages yet) Just select the basic solid background colour, say Black, and add it as a transparent colour.

You may want the transparency if you have a background image using CSS for the whole page, but, be warned, depending on the image in use, it may make the reading of the text difficult.

I hope this is of help.