Here's a basic example of doing liquid rounded corners:
<div class="cornerTR"/></div> <div class="cornerTL"/></div> <div id="content"> blah blah blah ... </div>
cornerTL, .cornerTR, .cornerBL, .cornerBR {
top:0px;
}
.cornerTR {
background:transparent url(/images/rim_TR.gif) no-repeat scroll right top;
display:block;
float:right;
height:27px;
position:relative;
right:0px;
width:27px;
}
.cornerTL {
background:transparent url(/images/rim_TL.gif) no-repeat scroll left top;
display:block;
float:left;
height:27px;
left:0px;
position:relative;
width:27px;
}
#content {
background: none repeat scroll 0%;
border-style:solid;
border-width:24px 5px 5px;
padding: 10px;
}Another slimmer method:
<div class="top"><span></span></div>
And the css
.top {
width:100%;
height:20px;
background:url(top.gif) no-repeat left top;
}
.top span {
display:block;
position:relative;
height:20px;
background:url(top-right.gif) no-repeat right top;
}