More liquid round corners

Adaptable rounded edges everywhere!

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.

Last line normal content

This is another rounded corner box

Everything can be in it

Valid HTML 4.01 Transitional

Valid CSS


This box doesn't touch the footer: quick demo-page without using proper header-2 column-footer model.
As long as there are not nested boxes with rounded corners, Internet Explorer will have no problems.