CSS Liquid corners
Creating Firefox and Safari rounded corners
- - Creating rounded corners without images

CSS Liquid corners

How to create rounded corners in css with images

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rounded Corners</title>
<style type="text/css">
<!--
/*
    | liquidcorners.css; feel free to adapt the style!
    | ================================================
    | use: 4 corners with borderline outside a contentbox with class="inside";
    |      image  = upper half: top left corner, long borderline, top right corner
    |               under half: bottom left corner, long borderline, bottom right corner
    |      CHANGE = you have to change this for fitting to your image
    |      YCC    = You Can Change (or omit), if wanted
    |      DNC    = Do Not Change
    | credits: original by francky kleyneman, see article/tutorial in Francky's Developers Corner:
    |          http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
    | adapted
    | by.....: ... (your name and site?!)
    |
    | + please let this text & links intact for a next user +
*/
.top-left, .top-right, .bottom-left, .bottom-right {
    background-image: url('images/corners1280x18.gif'); /* CHANGE: path and name of your image */
    height: 9px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
    font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
    }
.top-left, .bottom-left {
    margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
    }
.top-right, .bottom-right {
    margin-left: 9px;  /* CHANGE: replace by the width of one of your corners */
    margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
    }
.top-right {
    background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
    }
.bottom-left  {
    background-position: 0 -9px;    /* CHANGE: replace second number by negative height of one of your corners */
    }
.bottom-right {
    background-position: 100% -9px; /* CHANGE: replace second number by negative height of one of your corners */
    }
.inside {
    border-left: 1px solid #C00000; /* YCC: color & properties of the left-borderline */
    border-right: 1px solid #C00000;/* YCC: color & properties of the right-borderline */
    background: #EFEFEF;            /* YCC: background-color of the inside */
    color: #000000;                 /* YCC: default text-color of the inside */
    padding-left: 10px;             /* YCC: all texts at some distance of the left border */
    padding-right:10px;             /* YCC: all texts at some distance of the right border */
    }
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: -1px; padding-bottom: 1px; } /* DNC: to avoid splitting of the box */
 
 
</style>
 
 
</head>
<body>
    <div class="top-left"></div><div class="top-right"></div>
        <div class="inside">
        <p class="notopgap">Your text & other things inside</p>
        ...
        <p class="nobottomgap">...</p>
        </div>
    <div class="bottom-left"></div><div class="bottom-right"></div>
 
 
</body>
</html>

Creating Firefox and Safari rounded corners

Creating rounded corners without images

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. This is an example:

Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

The code for this example above is actually quite simple:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.</div>

These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has f.i. -moz-border-radius-topright as opposed to -webkit-border-top-right-radius:

These are handled by / should be handled by:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius