En un post anterior se explicaba como crear una caja con bordes redondeados mediante la propiedad de Mozilla' -moz-border-radius' y que, por tanto, no funcionaba en Internet Explorer. En este post veremos otra forma de crear bordes redondeados y que sí que nos servirá para Internet Explorer. Basado en "Nifty Corners: rounded corners without images" , el procedimiento se basa en crear divs de altura de 1px a 3px y jugando con los márgenes simular el redondeado de la caja. Lo mejor será ver como hacerlo.
CSS
#caja {
width: 400px;
color: #333;
}
.BordeRedondeado {
height: 1px;
overflow: hidden;
/* COLOR DE LA CAJA */
background-color: #E4E4E4;
}
.c1 { margin: 0 12px;}
.c2 { margin: 0 9px;}
.c3 { margin: 0 7px;}
.c4 { margin: 0 6px;}
.c5 { margin: 0 5px;}
.c6 { margin: 0 4px;}
.c7 { margin: 0 3px;}
.c8 { margin: 0 2px; height: 2px;}
.c9 { margin: 0 1px; height: 3px; }
.contenido {
height: auto;
padding: 0 15px;
}
HTML:
<div id="caja">
<div class="BordeRedondeado c1"> </div>
<div class="BordeRedondeado c2"> <div>
<div class="BordeRedondeado c3"> </div>
<div class="BordeRedondeado c4"> </div>
<div class="BordeRedondeado c5"> </div>
<div class="BordeRedondeado c6"> </div>
<div class="BordeRedondeado c7"> </div>
<div class="BordeRedondeado c8"> </div>
<div class="BordeRedondeado c9"> </div>
<div class="BordeRedondeado contenido">
Lorem ipsum dolor sit amet, consectetuer....
</div>
<div class="BordeRedondeado c9"> </div>
<div class="BordeRedondeado c8"> </div>
<div class="BordeRedondeado c7"> </div>
<div class="BordeRedondeado c6"> </div>
<div class="BordeRedondeado c5"> </div>
<div class="BordeRedondeado c4"> </div>
<div class="BordeRedondeado c3"> </div>
<div class="BordeRedondeado c2"> </div>
<div class="BordeRedondeado c1"> </div>
</div>




