Bordes redondeados con CSS 3 (border-radius)
En este momento, Firefox, Safari y Chrome permiten mostrar elementos con las esquinas redondeadas gracias a CSS 3 y sin usar imágenes u otros trucos. En esta página, por ejemplo, se usa en muchos sitios; podéis probar a abrirla con Opera o IE, y veréis la diferencia.
Una de las mejores cosas de esto es que se puede aplicar a casi cualquier elemento html: div, img, table, etc...
Conseguir ese efecto es muy fácil. El único problema es que la instrucción border-radius no es estándar todavía y los diferentes navegadores la han implementado por su cuenta. Por tanto:
- /* Propiedad tal como se usará cuándo sea estándar */
- .roundedBorders { border-radius: 5px; }
- /* Propiedad para Firefox */
- .roundedBorders { -moz-border-radius: 5px; }
- /* Propiedad para Safari, Chrome y navegadores con Webkit */
- .roundedBorders { -webkit-border-radius: 5px; }
Es posible manejar cada esquina de forma individual, pero la sintaxis es otra vez diferente para cada navegador:
- /* Firefox: */
- .topRightRoundedBorder { -moz-border-radius-topright: 5px; }
- /* Safari */
- .topRightRoundedBorder { -webkit-border-top-right-radius: 5px; }
Submitted by miguelSantirso about 1 year ago — last modified less than a minute ago