SEE SOME APPLICATIONS BEFORE YOU READ?

There's a Liquid Corners Playgarden with examples (and more examples on the home page). See you later!

Introduction

You can  have different wishes for a box with rounded (or other not-rectangular) corners of the border. My desires are:

• the boxes have to be collapsible, and working in a liquid / fluid design (regardless of the resolution or the measures of the window of the visitor).
• the boxes have to be scrollable over a not unicolored background (lines, an image, watermark), that means: transparent corners.
• no tables! no javascript!
• without browser sniffer or resolution detector, leading to different stylesheets.
• pure css, so everybody can enjoy it!
• small stylesheet for quick downloading.
• and easy to implement.

A glance at internet learned that a lot of solutions are traveling around the world. For instance I found: much table constructions, css but not suitable for transparency, transparent but not flexible, flexible but javascript, flexible and transparent but with full screen images, css and flexible and transparent but with extraordinary complex nested <div>'s, and so on.
All thinkable variants, but not a simple universal solution suitable for different situations.
Not in the mood for Googlin' and evaluating a big amount of web pages with nifty corners or smooth curved edges, I made the model you see above and under. Borders and corners of the "label-box" are dynamically adapted when you change the resolution or the width of the window. Without the use of tables, javascript or server side script.

 

 

Liquid everything!
Although the title of this page suggests only liquid round corners can be made, the found method is also fitting for other applications. 
In fact it's appropriate for:

• all kinds of liquid and transparent edges (round or not), and even
• collapsible and transparent parts of images.

You will find some other applications among the examples in the playgarden. I hope this will encourage your creativity. I think a lot more is possible!

Step by step

Step 1: upper left

First the left corner at the top of a box. This can be a gif-image, that is made transparent at the outside (for the case you are scrolling the box over a fixed background). I used this one of 9x9px:

We call this image as a background in a <div>, so we don't have to repeat for every box the same html with <img src="..." ...> in it:

This is resulting in:

But ... Internet Explorer is disobedient (again!) and thinks it is a normal paragraph with normal parameters. Result in IE is the showing of 2 images on top of each other:

To get rid of this, we insert a font-size which is smaller then the height of our image, to force a small line-height for IE. We take:

In this way IE is performing what it ought to do, and the first step is finished.

See step 1 at work

Step 2: upper right

The upper right corner is of course the mirrored left corner: . We cannot place the image in the same <div> as the left one: only 1 background-image at the time! So we make another <div>, and this time we place the image on the right side, with "float: right;". 
The result is (I added a little background-color for better seeing the position):

That's not right: we have to arrange something! The reason is that the two <div>'s are elements on block level, that cannot sit in the same chair. But with adding a negative "margin-top" we can lift the second one with the 9px height of the left corner:

Now also the upper right corner is in the good position, and will move right-left by increasing or decreasing the width of the window.

See step 2 at work

Step 3: upper middle

Well, if you just want some corner-indications around a text-block, you don't want a top-line, nor left or right margin-lines. Straight forward to Step 5!

When we enjoy lines, we can add another <div> with a borderline on top and the background-color for the rest (or with a repeating background-image of the top line between the two top corners, like: ).

• Then we are imitating the table-method!

But to save another <div>, we can easily enlarge the left-corner. The trick is, that the corner is a background-image: that cannot be larger then the box in which the image is picked up.

• Normal pasted html-images have an absolute width, show always, and cannot collapse.

So we paint a pretty long line at the right side of the css-background-image of the left corner:

To get our round corners working cross-resolution for a screen up to 1280x1024, we make this image 1280x9px. Then in case of emergency the rounded corner box can fill the whole screen, and for all smaller dimensions it is usable too.
Now we have to adapt the stylesheet for this image: not a fixed width, but the width of the box in which our rounded corners thing is contained. That can be accomplished by just canceling the width of the <div> (a "no-repeat" for the background-image we don't need: he is long enough!).

Result:

<

We see an overlap at the right side (because of the transparency of the right corner), that we have to juggle away. Therefore we clip the (imaginary) right end of the "left corner + topline" image, by adding a right-margin just as big as the width of the right corner.

After this, the upper side is complete.

See step 3 at work

Step 4: sides left and right

This is an easy one: we can just put border-lines at the paragraphs and other content of our "label-box" by making an inside container-<div>.
The border-color is the border color of our corner-gif's, the background color is the inside color of the corners.

• Remark: a self-painted borderline left and right (lines in image-format) is also possible; then we extend the ".inside" class with a background-image (for the left self-painted border), and place an extra <div> for the right self-painted border.
  This is illustrated in example 8 of the playgarden.

We give a padding of 10px for a little distance between the sides and the text lines of the content:

The only thing is: we have a gap between the top-box and the content-box.

The first element of the content must have a margin-top of 0px to avoid this (and parallel: the same thing for the margin-bottom of the last element of the content).

• Elegant and handsome is the "first-child" pseudo-class of css-2.1:
  div.inside *:first-child {margin-top: 0;}
• But Internet Explorer doesn't support this.

Then quickly made two classes for this:

Update 12 nov. 2006: see also page for gap safe alternative

The most of the work is done now.

See step 4 at work

Step 5: bottom

Here starts the upside-down of the first steps. We just need the upside-down images.

Notice that in case we want just corners without lines, we have to add in the bottom-left style the "width: 9px;" of the left corner, otherwise the corner will repeat in the background.

• Remark: at certain window-width's Firefox displays the right-floating corners 1px to much to the right (not exactly above/under the borderline of the box).- We can't help this: it occurs also in normal boxes without liquid borders, so it will be a small bug in the rounding off.

Anyway, our method is working.

See step 5 at work

Step 6: simplifying

So far we used four images for this model. But with Petr ('Pixy') Stanicek's article about fast css-rollovers in mind it seems elegant to clean things up and use only one image for everything.
First we paste the 4 images together:

Then we use a background view port to manage the parts in their right position, similar as in step 3 with the left corners. On our scratch-pad we see how to do this.

The top-left corner properties don't change. For the top-right corner, as a mirror of the top-left, there is no need to float-right anymore; this part now gets a margin-left of 9px in order to hide the top line crossing the transparent part of the top-left. The width can evaporate. 
Same thing for the bottom-right. Here we only have to move the under half with 9px upwards, so that the bottom parts of the image are visible instead of the upper corners. The code changes in:

 

• We note: now Firefox always displays the right sided corners correctly; that's another advantage of this method.

Thus rearranged all 4 corners, the raw material is finished.

See step 6 at work

The complete css

Having all working style-elements, we can now refine some more. We can combine elements with the same style, and we can compress the code by using shorthand notation.
And of course we remove the <style>-block from the <head> of our building-page, and make a separate external style sheet.
Although the exercises above asked lots of code and look a bit complicated, what remains in the end is a pretty small and simple stylesheet. Without the comments the stylesheet consists of 9 lines of code and is about 0.5kB. That's speedy!

See complete basic stylesheet: liquidcorners.css

The only remaining things in our html-pages are the link to the style sheet, and some small lines to get the stuff working at the places where you want the corners to appear.

In the case the first element of the content is in the meantime the last one, we can combine the two classes:

For rapid copy/paste, you can put the 3 start-lines in only one, and the 3 finish-lines also. So for instant pasting:

See textfile: paste-liquidcorners.txt

The thing to keep in mind is the adding of the classes "notopgap" and "nobottomgap" to the first/last elements of the content of the box. But no worry: if you see a gap, you know what is missing!
 

In a hurry?

All instructions for use of the stylesheet (and the variants used in the Playgarden) are included as comments in their sourcecode: so that's all you need to download.
The stylesheets, some images and a readme you'll find together in:

francky's liquidcorners-homekit.zip
(100kB)

Evaluation

The html- and css-validator of the w3c congratulate, so this liquid corners should show correctly in all modern browsers. Even Internet Explorer can handle it without to much extra hacks (where's the newspaper?!). I tested the performance under Windows 98SE: IE6, Firefox-1.0.6, Mozilla-1.7, and Netscape-6.2 and Opera-7.54 and Opera-8 (results: all ok ).

Variations

With the same principle you can do a lot more! Perhaps sometime I'll get new inspiration and enough ideas to write a "part II" with some more examples or other stuff ... and a link page is still missing and ... so ... desperately seeking time.

Playgarden

In the meantime you're welcome in my mini Liquid Corners Playgarden, in which I've placed a few examples / experiments. Maybe I can place some contributions of others too.

Update 20 aug. 2006: see also home page for links to more examples.

Enjoy the beauty of css!

12 oct. 2005

Update list

• updated 12 march 2007: added page for gap closing alternatives

• updated 13 nov. 2006: added 1st page for gap safe alternative

• updated 20 aug. 2006: added link to home page for more examples

• updated april 2006: link to triggering Q&A forum site removed (404)