Esto es muy bueno......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bordes Redondos</title>
<style type="text/css">
body {
background-color: #CC0000;
margin: 0px;
padding: 0px;
font-size: 18px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
div.rounded-box {
position: relative;
width: 19em;
background-color: #CCCCCC;
margin: 10px auto;
}
/*********************
Caja Exterior
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner {
position: absolute;
width: 20px;
height: 20px;
background-color: #CC0000;
overflow: hidden;
z-index: 0;
}
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: #CCCCCC;
line-height: 40px;
z-index: 0;
}
/*********************
Bordes
*********************/
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;}
/*********************
Contenido (txt)
*********************/
div.box-contents {
position: relative;
padding: 10px;
color:#000;
font-weight: bolder;
z-index: 1;
}
</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>
<!-- Aquí va el contenido -->
<div class="box-contents">
Aquí va el contenido. Eso sí, éste debe de tener como mínimo 2 líneas de texto, para que los bordes redondos se noten.
</div>
<!-- fin contenido -->
</div>
<div class="rounded-box" style="width: 30em;">
<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>
<!-- Aquí va el contenido -->
<div class="box-contents">
<p style="font-size: 12px; font-weight: lighter;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque gravida orci et nibh. Aenean quis magna. Sed eleifend, risus blandit ultrices condimentum, eros felis ultricies lacus, et ornare felis leo sit amet lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque faucibus pellentesque arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec non lacus. Phasellus dignissim nunc rutrum erat. In mattis molestie neque. Etiam imperdiet. Etiam erat felis, tempor eget, dapibus vel, malesuada vitae, tellus. Pellentesque egestas lorem nec urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sagittis purus sit amet justo.</p></div>
<!-- fin contenido -->
</div>
</body>
</html>
