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.

I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing and articles. You can take a look at some projects I've worked on and some of my writing. If you'd like to talk about your upcoming project, do get in touch.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)