/* | 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.....: Peter Klauer (class_finediv.php) 2006-10-05 14:19 | | + please let this text & links intact for a next user + */ .f3b17a2def799c57233a103034a6c0c04-top-left, .f3b17a2def799c57233a103034a6c0c04-top-right, .f3b17a2def799c57233a103034a6c0c04-bottom-left, .f3b17a2def799c57233a103034a6c0c04-bottom-right { background-image: url(3b17a2def799c57233a103034a6c0c04.gif); /* CHANGE: path and name of your image */ height: 6px; /* 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
's */ } .f3b17a2def799c57233a103034a6c0c04-top-left, .f3b17a2def799c57233a103034a6c0c04-bottom-left { margin-right: 6px; /* CHANGE: replace by the width of one of your corners */ } .f3b17a2def799c57233a103034a6c0c04-top-right, .f3b17a2def799c57233a103034a6c0c04-bottom-right { margin-left: 6px; /* CHANGE: replace by the width of one of your corners */ margin-top: -6px; /* CHANGE: replace by the height of one of your corners */ } .f3b17a2def799c57233a103034a6c0c04-top-right { background-position: 100% 0; /* DNC: position right corner at right side, no vertical changes */ } .f3b17a2def799c57233a103034a6c0c04-bottom-left { background-position: 0 -6px; /* CHANGE: replace second number by negative height of one of your corners */ } .f3b17a2def799c57233a103034a6c0c04-bottom-right { background-position: 100% -6px; /* CHANGE: replace second number by negative height of one of your corners */ } .f3b17a2def799c57233a103034a6c0c04-inside { border-left: 3px solid #1c85a7; /* YCC: color & properties of the left-borderline */ border-right: 3px solid #1c85a7;/* YCC: color & properties of the right-borderline */ background: #7da3a2; /* YCC: background-color of the inside */ color: #1f1816; /* 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 */ } .f3b17a2def799c57233a103034a6c0c04-notopgap { margin-top: 0; } /* DNC: to avoid splitting of the box */ .f3b17a2def799c57233a103034a6c0c04-nobottomgap { margin-bottom: -1px; padding-bottom: 1px; } /* DNC: to avoid splitting of the box */ /* implementation in the page: ... ... ...

Your text & other things inside

...

...

... */