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>