Una forma fácil de crear bordes redondeados en navegadores web que funcionen con el motor WebKit (Como por ejemplo: Safari).
Cabe decir Safari con su motor Webkit ha superado el acid test.
AVISO: ¡Este truco no funciona con Internet Explorer o Firefox, ya que no funcionan mediante el motor Webkit!
.sample {
-webkit-border-radius:10px; /* todos los corners */
-webkit-border-top-left-radius:15px; /* corner arriba a la izquierda */
-webkit-border-top-right-radius:50px; /* corner arriba a la derecha */
-webkit-border-bottom-left-radius:15px; /* corner abajo a la derecha */
-webkit-border-bottom-right-radius:50px; /* corner abajo a la izquierda */
border:1px solid #fc0; /* color del borde */
}
Ver ejemplo de su funcionamiento
Vía | DanielWash
Sigue la onda...
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
28 tutoriales de poderosos efectos de luz con Photoshop »
40 plantillas CSS y XHTML gratis y de alta calidad »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Speaky (4)
drakkar (3)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
dovercame (2)
Gil Peñaloza (2)
Por ahora hay 3 comentarios ¿Quieres opinar?
solo funciona en safari?
@Free funciona en Firefox y en Safari, pero en esta entrada solo lo explicamos para que funcione en Safari. Para que funcione en Firefox, lee esta entrada: http://www.cssblog.es/diferencia-entre-bordes-redondeados-con-css2-y-css3/ y http://www.cssblog.es/bordes-redondeados-con-css3-en-internet-explorer/
Un saludo.
Este metodo solo funciona bajo chrome.
Para usarlos con Mozilla seria:
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;