<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Rounded Box Demo </title> <style type="text/css"> body { background-color: #FFF; margin: 0px; padding: 0px; font-size: 16px; font-family: Georgia; } div.rounded-box { position:relative; width: 9em; background-color: #E6E6E6; margin: 3px; } /********************* GLOBAL ATTRIBUTES *********************/ div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner {position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;} div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#E6E6E6; line-height: 40px;} /********************* SPECIFIC ATTRIBUTES *********************/ div.top-left-corner { top:0px; left:0px; } div.bottom-left-corner {bottom:0px; left:0px;} div.top-right-corner {top:0px; right:0px;} div.bottom-right-corner {bottom: 0px; right:0px;} div.top-left-inside {left:-8px;} div.bottom-left-inside {left:-8px; top:-17px;} div.top-right-inside {left:-25px;} div.bottom-right-inside {left:-25px; top:-17px;} div.box-contents { position: relative; padding: 8px; color:#000; } </style> </head> <body> <div class="rounded-box"> <div class="top-left-corner"><div class="top-left-inside">•</div></div> <div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div> <div class="top-right-corner"><div class="top-right-inside">•</div></div> <div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div> <div class="box-contents"> Contents go here, but it must be at least two lines to look any good. </div> <!-- end div.box-contents --> </div> <!-- end div.rounded-box --> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)