This idea/tutorial/demo is a modification of Roger Johansson's Transparent custom corners and borders.
There are two popular ways of giving rounded corners to blocks of content: either set the block's background to an opaque corner image with a rendered background color/image, or place transparent images slightly out of the bounds of the block, and let the background color show through.
Opaque images don't work well with tiled/textured backgrounds though, and they have to be updated whenever the background changes. Opaque images also suffer from Gecko's rounding problems, sometimes causing a pixel of the block background to show around the corner image. Even though the other solution requires micromanaging pixels and doesn't completely solve all these problems, I decided to try it.
(There are ways to use pure Javascript to do borders, but that seems to be a very fragile solution.)
Why don't I just use Roger's implementation? While it's amazing, it is more complex than what my needs justify. I just want rounded corners on the edge between the content block's background color and the page background. The fact that I don't need borders means I can probably get by with fewer divs, smaller effective padding, and generally simpler css and Javascript. As I don't want shadows, I can use GIFs exclusively and get around IE's incomplete support of PNGs. Finally, this allows me to get by with a single image for the borders.
Please pardon the paragraph padding and ugly background color. I want to show just how little space is wasted by the borders, and how the GIF's transparent center allows the main content to show through.
The javascipt is unchanged from Roger's original at this point. I changed the corners to fit my site's theme, hollowed it out to let the content show through, and tweaked the CSS to re-position the images.
Too bad it doesn't work well. The background of the side divs shows up in the transparent area of the corner images. If you find a way, please contact me. This also suffers from the Gecko rounding problem. We could fix it, but since this still uses the same number of DIVs as the original it doesn't even meet our other goals. Time to try something else...
By the way, links down here are obscured by the corners.
Est etiam processus dynamicus qui sequitur mutationem! Qui sequitur mutationem consuetudium lectorum Mirum est notare quam! Mirum est notare quam littera gothica quam nunc putamus parum claram anteposuerit, tempor cum soluta nobis eleifend option congue nihil imperdiet doming, decima Eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes. Nihil imperdiet doming id quod mazim placerat facer possim assum Typi non habent.
Tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer; parum clari fiant sollemnes in futurum. Et quinta decima Eodem modo typi qui; placerat facer possim assum Typi non habent claritatem insitam est usus legentis in iis; qui nunc nobis videntur parum clari fiant. Littera gothica quam nunc putamus parum claram anteposuerit litterarum formas? Qui nunc nobis videntur parum clari fiant sollemnes in futurum!
Est etiam processus dynamicus qui sequitur mutationem! Qui sequitur mutationem consuetudium lectorum Mirum est notare quam! Mirum est notare quam littera gothica quam nunc putamus parum claram anteposuerit, tempor cum soluta nobis eleifend option congue nihil imperdiet doming, decima Eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes. Nihil imperdiet doming id quod mazim placerat facer possim assum Typi non habent.
Tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer; parum clari fiant sollemnes in futurum. Et quinta decima Eodem modo typi qui; placerat facer possim assum Typi non habent claritatem insitam est usus legentis in iis; qui nunc nobis videntur parum clari fiant. Littera gothica quam nunc putamus parum claram anteposuerit litterarum formas? Qui nunc nobis videntur parum clari fiant sollemnes in futurum!
