Comprobando los ejemplos de la web de donde lo saque vi que valia para todos los exploradores.
Al aplicarlo a mi web paracía que no me funcionaba y me ralle un montón porque el ejemplo estaba igual que el que venia en la web...
Resulta que el div que contiene los botones que van a tener el border redondo, tiene un background de color, pues bien al quitar el background pude ver como efectivamente si hacia los bordes redondeados.... grrrrrr
La duda es, como puedo hacer para que ese background quede por debajo de los botones?
El codigo sería mas o menos el siguiente:
Código:
<div class='botonera'>
<div class='rel'>
<div class='boton'>Boton 1</div>
<div class='boton'>Boton 2</div>
</div>
</div>
.botonera{
font-family:Verdana, Geneva, sans-serif;
font-size:1.6em;
border:1px solid #000;
height:60px;
background:#666;
}
.boton{
border:1px solid #FFF;
background:#000;
color:#FFF;
height:55px;
width:78px;
float:left;
margin-left:3px;
_margin-left:4px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:0.8em;
text-align:center;
margin-top:1px;
-moz-border-radius: 5px 10px;
-webkit-border-radius: 5px 10px;
border-top-right-radius:5px;
border-radius:5px;
behavior: url(border-radius.htc);
}
.rel {
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}
