EFFECTS - CSS: Professional Techniques for Modern Layout - page 173

I'll save you the trouble of counting: h e image is 40 pixels by 40 pixels. It's actually PNG with
transparency of a punchout of a circle, with the punchout bordered, and the outside of that set
to the same color as the overall page background. Call it corners.png for clarity's sake.

So now alter the CSS to say:

b.c { position : absolute ; height : 20px ; width : 20px ;
background : url(corners.png) no-repeat ;}

h at's all you're going to say here. h e default values of transparent for the background
color, scroll for the background attachment, and 0 0 for the position are implicitly
assigned.

Now is also a good time to delete the red-background rule, although that isn't strictly neces-
sary, since this rule's implicit transparent will override it.

Now, change the b elements to align the image as needed (see Figure 5-22):

b.tl { top : 0 ; left : 0 ; margin : -2px 0 0 -2px ;
background-position : top left ;}
b.tr { top : 0 ; right : 0 ; margin : -2px -2px 0 0 ;
background-position : top right ;}
b.bl { bottom : 0 ; left : 0 ; margin : 0 0 -2px -2px ;
background-position : bottom left ;}
b.br { bottom : 0 ; right : 0 ; margin : 0 -2px -2px 0 ;
background-position : bottom right ;}

175

Figure 5-22: The image fi lled into the elements creates the corners.

And just like that, rounded corners.

h e great thing about this technique is that you aren't limited to outward-curving borders.
You could just as easily create scalloped corners, or diagonally cut corners, or whatever comes
to mind (see Figure 5-23 for some examples). All you have to do is swap out the image you
use to create the corners, and possibly also adjust the size of the b elements.