estilos para el contenedor de bordes redondos
Código:
/* MODULE */
html #modul {
background: #badbf4;
}
#modul_top {
background: url(../img/a1.gif) no-repeat top left;
height: 10px;
}
#modul_top_right{
background: url(../img/a2.gif) no-repeat top right;
height: 10px;
}
#modul_bottom {
background: url(../img/a3.gif) no-repeat bottom left;
height: 10px;
}
#modul_bottom_right {
background: url(../img/a4.gif) no-repeat bottom right;
height: 10px;
}
#modul_content {
padding-left: 15px;
padding-right: 15px;
background-color: transparent;
color: #5a96c6;
}
Código html
Código:
<div id = "modul">
<div id = "modul_top" ><div id = "modul_top_right" ></div></div>
<div id = "modul_content" >
informacion texto
</div>
<div id = "modul_bottom" ><div id = "modul_bottom_right" ></div></div>
</div>
RECORDAD que debeis de realizar los 4 gráficos correspondientes a las esquinas
a1.gif, a2.gif, a3.gif y a4.gif y del mismo color del fondo que definamos en el background principal.
Existe otra forma de utilizar este método usando gráficos en los que el color del borde redondeado sea transparente y así poder utilizar este recurso con sólo 4 gráficos independientemente del color del background.