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

h anks to the negative top and let margins, the punching box is actually pulled outward so
that it overlaps the border of the main div . Setting right and bottom borders that match the
border on the main div creates the illusion of an irregularly shaped box. And so the box is
once again punched!
Of course, you can use this in contexts other than a corner. Here's the CSS for a punched
treatment for a blockquote (also represented in Figure 5-17):
blockquote { font-size : 150% ; font-weight : bold ; background : #C0FFEE ;
float : right ; width : 40% ;
padding : 0.25em 5% ; margin-right : -3px ;
border : 3px solid black ; border-right : 0 ;}
172
Figure 5-17: A boxpunched blockquote.
PRE-CSS 3 ROUNDED CORNERS
Using a combination of boxpunching and CSS sprites (discussed later in this chapter), you
can create rounded corners with one image and four extra elements. h e advantage is that
these are pretty cross-browser compatible, with only a few quirks in older browsers like IE6
and Safari 2. h e downside is the need for the extra elements and image.