Small Pirate

Los bordes redondos siempre fueron un problema, mas bien el problema son los navegadores. Generalmente los que tienen una minima idea de photoshop saben que es mejor usar una imagen para ahorrarse el problema de que algunos navegadores no sean compatibles con esta función.

En mi opinión, siempre es mejor usar imagenes, me di cuenta luego de un tiempo mientras diseñaba. Pero para aquellos que no son amigos del PS y/o prefieren hacerlo usando css, les dejo la manera que cubrirá la mayor cantidad de navegadores.

---

Usando CSS3, se hace de la siguiente manera:

.bordes-redondos{

border-radius:5px;

}

Si desarmamos la propiedad podemos obtenerla de una manera más especifica:

border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;

---

Para Firefox, será de la siguiente manera:

.bordes-redondos{

-moz-border-radius: 5px;

}

Si desarmamos quedará así:

-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;

---

Internet Explorer (que a veces se vuelve una pesadilla, por lo menos para mi) se hace de la siguiente manera:

.bordes-redondos{

ms-border-radius: 5px;

}

Y para hacerlo de manera especifica:

.bordes-redondos{

-ms-border-radius-topleft: 5px;
-ms-border-radius-topright: 5px;
-ms-border-radius-bottomleft: 5px;
-ms-border-radius-bottomright: 5px;


}

---

Safari y Webkit, ofrecen la siguiente propiedad:

.bordes-redondos{

-webkit-border-radius: 5px

}

Siendo de la siguiente manera si queremos aplicarlo solo a algunas puntas:

.bordes-redondos{

-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;

}

---

Konkeror, nos ofrece el siguiente método:

.bordes-redondos{

-khtml-border-radius: 5px;

}

De manera descompuesta sería así:

.bordes-redondos{

-khtml-border-radius-topleft: 5px;
-khtml-border-radius-topright: 5px;
-khtml-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomright: 5px;

}

---

Si lo quieren todo junto, en un ejemplo, sería así:

.bordes-redondos{
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}

Fuente: http://www.clubdesarrolladores.com/articulos/mostrar/43-esquinas-redondeadas-round-corners-en-todos-los-navegadores

(Me basé en ese artículo, pero modifiqué los ejemplos y corregí alguno que otro error)

Bastantes navegadores en sus últimas versiones, ya leen y aceptan CSS3. Sin embargo, para no dejar de lado a las versiones anteriores y a aquellos que todavía no avanzaron, creo que esto ayudará de algo.

Espero les sirva. Saludos Spirateros.

muy bno santyyx te dejo +1 es de gran utilidad para los q no saben como hacer y para mi q no sabia el de IE y konkeror

Si, sería así:

.menu_izq {
   margin:0px;
   font-size:13px;
   width: 400px;
   position:relative;
   float: left;
   height:30px;
   vertical-align: middle;
   text-align: left;
   padding-left: 10px;
   color:#474747;
   border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
/* Cambiale el 10 por la cantidad que quieras */

}

+1 , gRAX es muy útil una buena visualización en la mayoría de los navegadores ;)
(ya q hay personas que solo usan el IE, por no querer descargarse el chromme o Firefox)