Nested liquid round corners

Adaptable rounded edges everywhere!

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

Source code seems complicated, but very easy method:

  1. Make your page as normal.
  2. Paint desired corners instead of the corners1280x18.gif of this page.
  3. Change liquidcorners.css with the link to your new image, and make other changes if desired.
  4. Link your page to this new stylesheet.
  5. Simple pasting the corner-code in each box you want to give rounded corners.
  6. For a box with a different background you make a new background-image.
  7. Connect the boxes and bg-colors by adding a class="boxcolor-something" and add simple rule to the stylesheet (in this example: in the style block in the head).
  8. Go!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Last line normal content

This is a nested rounded corner box

Evereything can be in it

Valid HTML 4.01 Transitional

Valid CSS

Nested box #2

Here another one with a flexible width

Nested box #3

Here a smaller flexible width: possible also

francky's liquid corners article | francky home