Liquid Rounded Corners with Webdings

A rounded rectangle CSS layout that dynamically fits both window size and font size

What is it

A flexible HTML/CSS layout of column with rounded corners, without using images or any fixed-size element. This makes the layout completely liquid – try changing the text size to see for yourself.

This layout can be used with any color and any background, including background images. It is tested on Mac and Windows, in IE6, IE7, Firefox, Safari and Opera.

How it works

Each rounded div contains 4 double-size n characters at its corners. (The n character is part of the Webdings font, which is bundled with both Windows and Mac.)

<div class="rounded">
  <div class="corner top left">n</div>
  <div class="corner top right">n</div>
  <div class="corner bottom left">n</div>
  <div class="corner bottom right">n</div>
</div>

The rounded div also contains three divs with the desired background color.

<div class="head">&nbsp;</div>

<div class="body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="foot">&nbsp;</div>

This way the rounded corner size is always 1em (i.e., equal to the height of one line of text). If the user changes the text size, the corner would resize accordingly.

The CSS for all these divs:

.rounded {
  position: relative; /* containing block for positioning the corners */
}

* html .rounded { height: 1%; } /* hack to force IE6 layout: */

.corner {
  color:       aqua;    /* change to what you want */
  position:    absolute;
  font-family: Webdings;
  font-size:   200%;
  width:       1em;     /* for Safari */
  z-index:     1;       /* so it would be behind the text, */
}                       /* since Firefox hides negative z-index */

.top    { top:    0; }
.bottom { bottom: 0; }
.right  { right:  0; }
.left   { left:   0; }

.body, .head, .foot {
    background: aqua;     /* change to what you want */
    position:   relative; /* for z-index, */
    z-index:    2;        /* since Firefox hides negative z-index */
}

.head, .foot {
    margin: 0 1em;
}

Colored head and foot

You can make the head and the foot in a different color by changing their background color, and changing the text color of the corners.

.head   { background: navy; }
.top    { color:      navy; }

.foot   { background: purple; }
.bottom { color:      purple; }

Multiline text in the head and foot

if you put text in the head (or foot), you need to make sure it will expand nicely when that text spans more than one line.

To do that, put two divs inside the head div:

1. A position: relative div with the text (marked green below). The position: relative is needed because to set a z-index that is larger than the background's z-index (since Firefox hides elements with negative z-index).
2. A position: absolute div with the background (marked red below). This div is positioned so that it covers any lines beyond the first.

.head_text {
  position: relative;
  z-index:  2;
}

.head_bg {
  position: absolute;
  left:    -1em;
  right:   -1em;
  top:      1em;
  bottom:   0;
  z-index:  1;
}