Server:Server Status

CSS-Only Rounded, Shadowed, Transparent Corners

I've been super frustrated on a web project I've been on where I've wanted CSS-only (no slow-ass JSON solutions) rounded corners with transparent backgrounds and and drop shadows. I originally tried a 3 image solution with transparent backgrounds, but it didn't work well and the middle image showed up behind the top and bottom images. I tried just making the backgrounds of the png's match the css background, and I discovered the OSX Safari png gamma correction bug. I hate GIF's and JPEG's as much as I can avoid them, so I decided to just rewrite the solution from scratch, which isn't that hard.

The real reason I am writing this is because 90% of the time I want to do something online I just search for code to do something and use the first result as a template. It took me like 30 tries and I still found nothing decent, so I decided to just do it myself from scratch, and maybe someone else can use it.

This is a 9 image solution made in 3 horizontal sections: a header, a center block, and a footer. Yea, it's a ton of nested divs, but it validates, uses no overlap, works on all browsershots I have tested, and can be used with very small pngs. First of all, here's a sample of the result. Here's the images, their titles, and their dimensions, all of which can be modified:

  • Top Left Corner, 15px x 15px, tlc.png tlc
  • Top Border, 1px x 15px, tb.png tb
  • Top Right Corner, 15px x 15px, trc.png trc
  • Left Border, 15px x 1px, l.png l
  • Center, 1px x 1px, c.png c
  • Right Border, 15px x 1px, r.png r
  • Bottom Left Corner, 15px x 15px, blc.png blc
  • Bottom Border, 1px x 15px, bb.png bb
  • Bottom Right Corner, 15px x 15px, brc.png brc

The html for this box is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
  <div id="box">
   <div id="tlc"><div id="trc"><div id="tb"></div></div></div>
   <div id="lb"><div id="rb"><div id="c">
    <p>Holy Crap, content galore!</p>
   <div id="blc"><div id="brc"><div id="bb"></div></div></div>

View the CSS for this technique here. Here's how this all breaks down in the box:


Here's the css required to make this happen, using the variables in the above image:

#box {
  text-align: left;
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: $g;
#box #c {
  background: transparent url('c.png') repeat center center;
  margin: 0 $e 0 $f;
#box #tlc {
  height: $c;
  background: transparent url('tlc.png') no-repeat top left;
#box #trc {
  height: $c;
  background: transparent url('trc.png') no-repeat top right;
#box #blc {
  height: $d;
  background: transparent url('blc.png') no-repeat bottom left;
#box #brc {
  height: $d;
  background: transparent url('brc.png') no-repeat bottom right;
#box #tb {
  height: $c;
  margin: 0 $a 0 $b;
  background: transparent url('tb.png') repeat-x top center;
#box #bb {
  height: $d;
  margin: 0 $a 0 $b;
  background: transparent url('bb.png') repeat-x bottom center;
#box #rb {
  background: transparent url('r.png') repeat-y center right;
#box #lb {
  background: transparent url('l.png') repeat-y center left;
p {
  margin: 0 auto;
  padding: 0;

It should be very flexible; if you need to you can make the borders bigger or smaller, you can even use different widths for the bottom corners if you must. I thought about toying with another master-div that was on a higher z-index plane so your content could dip into the header/footer, but I decided against it because I don't have time. I hope this is useful, it shouldn't be so complicated but there were no decent guides online.

Leave a Reply