Rounded Corners The Hard Way

layout hacks 2001 still works

Before border-radius, a rounded box meant four corner images and a nest of divs, and every design shop had its own tortured version.

In 2026: Still works perfectly, which is the joke: this box has genuinely rounded corners in 2026, built from four quarter-circle GIFs and no CSS radius at all. A whole cottage industry of generators and nine-slice table variants existed to spare people writing this by hand. One CSS property retired all of it in 2010.

Where it came from: Universal practice from about 2001. Dan Cederholm's Mountaintop Corners, A List Apart 2004, and the Nifty Corners generators were the most-copied versions. border-radius ended it around 2010. MDN ↗

<style>
.rbox { position: relative; background: #dde6f0; padding: 22px;
        color: #14284a; font-family: Verdana, sans-serif; }
.rbox img { position: absolute; width: 16px; height: 16px; border: 0; }
.rc-tl { top: 0; left: 0 }    .rc-tr { top: 0; right: 0 }
.rc-bl { bottom: 0; left: 0 } .rc-br { bottom: 0; right: 0 }
</style>

<div class="rbox">
  <img class="rc-tl" src="https://xbawx.com/inc/img/demo/corner_tl.gif">
  <img class="rc-tr" src="https://xbawx.com/inc/img/demo/corner_tr.gif">
  <img class="rc-bl" src="https://xbawx.com/inc/img/demo/corner_bl.gif">
  <img class="rc-br" src="https://xbawx.com/inc/img/demo/corner_br.gif">
  Rounded corners, no border-radius. Four GIFs holding this shape together.
</div>

sandboxed demo · breaks nothing but itselfrestart

More in layout hacks