A PURE CSS DRAWING OF A STAINED-GLASS WINDOW. The individual “rondels” are divs, and each row of rondels has a class of “wide” or “normal,” depending on the number of panes it contains. The rows have a negative bottom margin to pull them up so that the borders of the rondels touch.

The rondels also have negative left and right margins.

The first and last rondels in the wide rows have a negative left or right margin to pull them halfway out of the container div.

Webkit does not respect overflow:hidden for elements with border-radius, so the rondels in the arched part of the window will not be clipped in Safari and Chrome.