Liquid round corners

Adaptable rounded edges

a multifunctional flexible css-concept with transparency
for creating dynamically changing not rectangular borders

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

Step by step

  1. upper left
  2. upper right
  3. upper middle
  4. sides left and right
  5. bottom
  6. simplifying

The complete css

In a hurry? (download home kit)

Evaluation

Variations

Playgarden

Introduction

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

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.

 

Example: try it by turning on a (history-)sidebar and varying it's width, 
or by de-maximizing the window and doing the same.

 

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:

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:

show topleft corner

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:

stylesheet

.top-left {

background-image: url('images/corner-topleft9x9.gif');
height: 9px;
width: 9px;
}

html

<div class="top-left"></div>


This is resulting in:

FF-result

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:

IE-result

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:

stylesheet

.top-left {

...
font-size: 2px;
}


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: topright-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):

not in line

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:

stylesheet

.top-right {

float: right;
margin-top: -9px;
background-image: url('images/corner-topright9x9.gif'); 
height: 9px; 
width: 9px;
font-size: 2px;
}

html

<div class="top-left"></div>
<div class="top-right"></div>


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: topline).

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.

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

left corner with topline

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!).

stylesheet

.top-left {

background-image: url('images/corner-topleft1280x9.gif');
height: 9px;
font-size: 2px;
}


Result:

overlapping < detail overlap

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.

stylesheet

.top-left {

...
margin-right: 9px;
display: block;
}


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.

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

stylesheet

.inside {

border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}

html

<div class="inside">

<!-- what you want inside -->
<h4>abc</h4>
<p>def</p>
<ul><li>ghi</li></ul>
<!-- and so on -->

</div>


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

gap

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).

Then quickly made two classes for this:

stylesheet

.notopgap {

margin-top: 0;
}

.nobottomgap {

margin-bottom: 0;
}

html

<div class="inside">

<p class="notopgap">First element</p>
<p>Other elements...</p>
<p class="notbottomgap">Last element</p>

</div>

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.

stylesheet

.bottom-left {

background-image: url('images/corner-botleft1280x9.gif');
height: 9px;
font-size: 2px;
margin-right: 9px;
}

.bottom-right {

background-image: url('images/corner-botright9x9.gif');
background-position: 100% 0;
background-repeat: no-repeat;
height: 9px;
font-size: 2px;
margin-top: -9px;
}

html

<div class="bottom-left"></div>
<div class="bottom-right"></div>


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.

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:

a long sigar

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.

corners divided

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:

stylesheet

.top-left {

margin-right: 9px; /* clip right corner */
background-image: url('images/corners1280x18.gif');
height: 9px; /* vertical: show first half of the image with the top-corners in it */
font-size: 2px; /* correct height for IE */
}

.top-right {

margin-top: -9px; /* to level of top-left corner */
margin-left: 9px; /* clip left corner */
background-image: url('images/corners1280x18.gif'); 
background-position: 100% 0; /* show bg-image starting at the right */
height: 9px; 
font-size: 2px;
}

.bottom-left {

margin-right: 9px; /* clip right corner */

background-image: url('images/corners1280x18.gif');
background-position: 0 -9px; /* show under half of the image */
height: 9px;
font-size: 2px;
}

.bottom-right {

margin-top: -9px; /* to level of bottom-left corner */
margin-left: 9px; /* clip left corner */
background-image: url('images/corners1280x18.gif'); 
background-position: 100% -9px; /* under half, right side */
height: 9px; 
font-size: 2px; 
}

.inside {

border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFEFEF;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}

.notopgap {

margin-top: 0;
}

.nobottomgap {

margin-bottom: 0;
}

 

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.

html (head)

<link rel="stylesheet" type="text/css" href="liquidcorners.css">

html (body)

<div class="top-left"></div>
<div class="top-right"></div>

<div class="inside">

<p class="notopgap">...</p>
...
<p class="nobottomgap">...</p>

</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>


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

html (body)

<p class="notopgap nobottomgap">...</p>


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! smiley
 

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)

Liquid round corners: easy making!

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 wink).

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!

francky kleyneman 12 oct. 2005

 

This article was triggered by a question in the Dutch forum "www.designhulp.nl":

http://designhulp.nl/forum/basistechnieken/css-layout/8900/1#frmMsg56326

(update april 2006: this site isn't existing anymore ...)

Update list

Valid HTML 4.01 Transitional

Valid CSS

mail francky?
mail francky!

 

nederlands * dutch