<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> .cool_div { background-color: #E68200; color: #FFFFFF; width: 50%; position: relative; /* This is needed because i need to keep the corners in bound */ margin: 0 auto; } .cool_div p { padding: 25px } .tl, .tr, .bl, .br { position: absolute; padding: 5px; background-color: #666666; background-repeat: no-repeat; height: 0px; /* Fixing IE */ } /* Images from webcredible, thank you */ .tl { top: 0; left: 0; background-image: url(http://www.webcredible.co.uk/i/tl.gif); } .tr { top: 0; right: 0; background-image: url(http://www.webcredible.co.uk/i/tr.gif); } .br { bottom: 0; right: 0; background-image: url(http://www.webcredible.co.uk/i/br.gif); } .bl { bottom: 0; left: 0; background-image: url(http://www.webcredible.co.uk/i/bl.gif); } </style> <!-- Fixing IE more--> <!--[if lte IE 7]><style type="text/css">.tl { min-height: 0px; } .cool_div { margin-bottom: 10px; } </style><![endif]--> </head> <body> <div class="cool_div"> <div class="tl"></div> <div class="tr"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lectus. Praesent arcu tellus, interdum at, condimentum quis, dapibus non, magna. Donec semper. Vivamus turpis nisl, porttitor sit amet, vehicula sed, euismod at, velit. Donec a risus vitae lacus bibendum feugiat. Quisque fringilla, neque at imperdiet volutpat, est sapien volutpat dui, at euismod nisi neque in metus. Vivamus vel enim.</p> <div class="bl"></div> <div class="br"></div> </div> <div class="cool_div"> <div class="tl"></div> <div class="tr"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lectus. Praesent arcu tellus, interdum at, condimentum quis, dapibus non, magna. Donec semper. Vivamus turpis nisl, porttitor sit amet, vehicula sed, euismod at, velit. Donec a risus vitae lacus bibendum feugiat. Quisque fringilla, neque at imperdiet volutpat, est sapien volutpat dui, at euismod nisi neque in metus. Vivamus vel enim.</p> <div class="bl"></div> <div class="br"></div> </div> <div class="cool_div"> <div class="tl"></div> <div class="tr"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lectus. Praesent arcu tellus, interdum at, condimentum quis, dapibus non, magna. Donec semper. Vivamus turpis nisl, porttitor sit amet, vehicula sed, euismod at, velit. Donec a risus vitae lacus bibendum feugiat. Quisque fringilla, neque at imperdiet volutpat, est sapien volutpat dui, at euismod nisi neque in metus. Vivamus vel enim.</p> <div class="bl"></div> <div class="br"></div> </div> <div class="cool_div"> <div class="tl"></div> <div class="tr"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lectus. Praesent arcu tellus, interdum at, condimentum quis, dapibus non, magna. Donec semper. Vivamus turpis nisl, porttitor sit amet, vehicula sed, euismod at, velit. Donec a risus vitae lacus bibendum feugiat. Quisque fringilla, neque at imperdiet volutpat, est sapien volutpat dui, at euismod nisi neque in metus. Vivamus vel enim.</p> <div class="bl"></div> <div class="br"></div> </div> </body></html>