Drupal website specialists. Call us about your project on (02) 8006 3402

Liquid rounded corners with CSS

Posted 19/July/2008 by neubreed

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;
}