<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Esquinas redondeadas con css</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin: 0px; padding: 0px;}
#caja { margin: 20px auto;
background-color: #43758c;
width: 200px;
height: 200px;
position: relative;
}
.esquina { background-color: #fff;
position: absolute;
line-height: 20px;
width: 10px;
height: 10px;
overflow: hidden;
}
.lt {left: 0px;top: 0px;}
.rt {right: 0px;top: 0px;}
.lb {left: 0px;bottom: 0px;}
.rb {right: 0px;bottom: 0px;}
.punto { font-weight: bold;
color: #43758c;
position: absolute;
font-size: 60px;
background-color: transparent;
}
.plt{top: -3px;left: -2px;}
.prt{top: -3px;right: -2px;}
.plb{bottom: -1px;left: -2px;}
.prb{bottom: -1px;right: -2px;}
#texto {color: #fff;padding: 8px;}
</style>
</head>
<body>
<div id="caja">
<div class="esquina lt">
<div class="punto plt">•</div>
</div>
<div class="esquina rt">
<div class="punto prt">•</div>
</div>
<div class="esquina lb">
<div class="punto plb">•</div>
</div>
<div class="esquina rb">
<div class="punto prb">•</div>
</div>
<div id="texto">Esta caja tiene las esquinas redondeadas usando únicamente css. Puede ser un buen truco para hacer todo tipo de decoraciones a las cajas.</div>
</div>
</body>
</html>