By Simon Willison

More CSS techniques

By Simon Willison

In my recent article Rounded Corners with CSS and JavaScript I described a simple and popular CSS technique for creating fixed-width boxes with rounded corners using two background images, one for the top of the box and one for the bottom. A new tutorial on 456 Berea Street demonstrates a similar technique for creating elegant “teaser” boxes, but then goes on to show how the same effect can be achieved using just a single image re-used for both backgrounds.

Another fun CSS demo doing the rounds at the moment is Bending the Matrix, which makes extensive use of image replacement and CSS Sprites to convert a regular unordered list in to a curved graphical navigation menu.

Just two years ago, every time the topic of CSS based layouts came up people would complain that they all essentially looked the same – boxy layouts with minimalistic, visually uninspiring designs. Today those complaints have all but vanished, thanks both to an influx of talented visual designers to the web standards scene and to the many mature CSS techniques being actively shared within the community.

  • tomByrer

    Actually, I found a link at submitted by Lim Chee Aun for her demostration of the 1 image rounding corners at . Seems she posted the demo on her site back in December of last year, and promoted it on ALA in Feb.

    Seems web design is much like the music world; if you invented a new twist of technique or style, chances are atleast 2 other are doing the same that you are. It just becomes a race who gets more popular with it first :)

  • Wow, not sure what’s bending the most. That navigation or my mind after scanning the tutorial ;) Very cool though.

Get the latest in JavaScript, once a week, for free.