One-image rounded corners

A clever new CSS demo over at 456 Berea Street: CSS Teaser Box (via Simon Willison). It gives you rounded corners on a CSS box using only one image. The flaw is that the box has to be fixed width, but it’s still a useful technique.

The reason that it’s cool, however, is that I couldn’t work out how it worked at first. After some discussions with Simon, we sussed it; it is clever! The P inside the box has a coloured background; this coloured background hides the extra bits of the background image (the bottom of the box on the h3’s background, and the top of the box on the div’s background). That’s smart, that.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)