Really simple roundes corners with CSS

I’ve been looking for a long time for a solution to produce the oh so popular rounded corners on my DIV elements and finally I found what I was looking for over at A list apart where Dan Cederholm describes his take on the issue of rounded corners. The solution he presents are decievingly simple in it’s approach, and surprisingly flexible in its application.

The design uses two transparent gif masks (easily created in for example GIMP) and  a short, organized CSS:

dl {
  width: 240px;
  margin: 0 0 20px 20px;
  background: #999 url(box_bottom.gif) »
  no-repeat bottom left;
  } dt {
  margin: 0;
  padding: 10px;
  background: #999 url(box_top.gif) »
  no-repeat top left;
  }

dd {
  margin: 0;
  padding: 10px;
  }


I’ve just tested this but will toy around with it to see how much can be squeezed out of the technique (I think quite a lot).

Popularity: 12% [?]