所需图片：
corners-type1 corners-type2 corners-type3 corners-type4 corners-type5 roundedbox-type5-bg
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Previe of Type 4 - Easy rounded corners, by Ignacio Ricci (www.ignacioricci.com)</title> <style> body {margin:0; padding:40px; font:76% Georgia, "Times New Roman", Times, serif; background:#FFF;} /* Rounded-cornered divs -*/ .roundedBox {position:relative; padding:17px; margin:10px 0;} /*- All the corners -*/ .corner {position:absolute; 17px; height:17px;} /*- Each corner -*/ .topLeft {top:0; left:0; background-position:-1px -1px;} .topRight {top:0; right:0; background-position:-19px -1px;} .bottomLeft {bottom:0; left:0; background-position:-1px -19px;} .bottomRight {bottom:0; right:0; background-position:-19px -19px;} /*- Type1 - Blue -*/ #type1 {background-color:#CCDEDE;} #type1 .corner {background-image:url(img/corners-type1.gif);} /*- Type2 - Green -*/ #type2 {background-color:#CDDFCA;} #type2 .corner {background-image:url(img/corners-type2.gif);} /*- Type3 - Violet -*/ #type3 {background-color:#D3CADF;} #type3 .corner {background-image:url(img/corners-type3.gif);} /*- Type4 - Red with border -*/ /* We change the corners' position and add the border */ #type4 {background-color:#CCACAE; border:1px solid #AD9396;} #type4 .corner {background-image:url(img/corners-type4.gif);} #type4 .topLeft {top:-1px; left:-1px;} #type4 .topRight {top:-1px; right:-1px;} #type4 .bottomLeft {bottom:-1px; left:-1px;} #type4 .bottomRight {bottom:-1px; right:-1px;} /*- Type5 - With gradient -*/ /* We change the top corners' height, and the bottom corners background-position. We must also add to the containing div a gradient to repeat in x. */ #type5 {background:#FECBCA url(img/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;} #type5 .corner {background-image:url(img/corners-type5.png);} #type5 .topLeft, #type5 .topRight {height:140px;} #type5 .bottomLeft {background-position:-1px -142px;} #type5 .bottomRight {background-position:-19px -142px;} </style> </head> <body> <!-- Type1: Blue --> <div class="roundedBox" id="type1"> <strong>My content in roundedBox Type 1</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type2: Green --> <div class="roundedBox" id="type2"> <strong>My content in roundedBox Type 2</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type3: Violet --> <div class="roundedBox" id="type3"> <strong>My content in roundedBox Type 3</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type4: Red with border --> <div class="roundedBox" id="type4"> <strong>My content in roundedBox Type 4</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type5: With gradient --> <div class="roundedBox" id="type5"> <strong>My content in roundedBox Type 5</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> </body> </html>