CSS Teaser Box

Just a little something that may be of use to someone. It’s pretty common for websites to have “teasers” that show an excerpt of a full article or document. The design for a recent project called for a teaser box with rounded corners.

Very simple, but I like the way it uses no extra markup, and will grow (vertically, it has a fixed width) to contain any amount of text. It will also take huge text sizes to break it.

Update: I just realized that the two images can be combined. That’s one less server hit and a few bytes saved on image size.

Posted on June 9, 2004 in CSS


  1. Hey, that’s quite neat. Would you mind if I used this technique on my website?

  2. June 9, 2004 by Roger (Author comment)

    Not at all. It’s a bit obvious if you use the same graphics though, so I’d recommend creating your own ;-)

  3. Very nice. These little one off techniques are great to note — bookmarking page right now. Thanks Roger!

  4. Very slick, love the combining of the image so that you use only one…

  5. Thanks Roger. Of course I’d change the graphics! :-)

  6. Pretty cool, nice one Roger!

  7. Looks and works great. I really like the CSS. I’m inspired to have a look at my own style sheets, to see if there are any background-images that can be combined.

  8. I use a similar technique on our site at http://www.nscu.com

  9. June 17, 2004 by iWantToKeepAnon

    The guy from www.nscu.com has a good idea. Instead of drawing the box, they draw the few little pixels outside the box. That way the top and bottom image can be used for differently colored boxes … cool idea.

  10. Out of interest was there a reason for quoting the source for the graphic in the CSS?

    ie: background:url(“tsr-a.gif”) 410px 50% no-repeat; as opposed to background:url(tsr-a.gif) 410px 50% no-repeat;

    Otherwise cool idea!

  11. June 23, 2004 by Roger (Author comment)

    Richard: Not really. Force of habit I guess ;)

  12. very useful tips,and it makes my blockquote a good looking now:)

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.