Mediante hojas de estilo es posible poner las esquinas redondeadas a nuestros diseños, permitiendo de esta forma, una apariencia mucho más estética, con el método que describiremos a continuación, podremos ver cómo realizar esto de una forma sencilla mediante CSS3, cabe mencionar que se podrá visualizar correctamente en todos los navegadores actuales, excepto Internet Explorer, que soporta esta característica solo desde su versión 9.
En caso de que busquemos que todas las esquinas queden redondeadas de la misma manera, deberemos utilizar los siguientes atributos:
Para navegadores basados en webkit (Safari, Chrome):
-webkit-border-radius: 10px;
Para navegadores basados en mozilla/firefox sería el siguiente ejemplo:
-moz-border-radius: 10px;
Utilizando Opera o IE9+ la siguiente es la opción adecuada:
-border-radius: 10px;
En caso de que necesitemos que las curvaturas sean distintas entre sí, CSS3 también ofrece esa posibilidad con las siguientes instrucciones:
Para los navegadores basados en webkit, el siguiente ejemplo muestra cómo lograr dicho efecto:
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 45px;
Para Firefox, las instrucciones son muy similares a las usadas por webkit, únicamente será necesario cambiar una porción de las instrucciones:
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 45px;
Finalmente, para IE9+ y Opera, las instrucciones adecuadas para lograr las esquinas redondeadas de forma diferente son las siguientes:
order-top-left-radius: 25px;
border-top-right-radius: 10px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 45px;
Con esas sencillas instrucciones ya se habrá logrado tener las esquinas redondeadas, si se desea darle un toque más estético, se podrán emplear otros efectos disponibles con CSS3, por ejemplo el sombreado, aunque éste no es tan estético como el realizado mediante software profesional como Photoshop, aún así tiene una apariencia suficientemente buena como para ser utilizado recurrentemente, sobre todo por el tiempo de implantación reducido que requiere, las instrucciones necesarias para implementar sombreado a nuestros elementos web es el siguiente:
Para navegadores basados en Mozilla/Firefox se deberá utilizar el siguiente código:
.box_shadow {
moz-box-shadow: 2px 2px 4px #eaeaea
}
Para los navegadores basados en webkit, como Safari o Chrome, lo ideal es utilizar el siguiente código:
.box_shadow {
webkit-box-shadow: 2px 2px 4px # eaeaea;
}
Para IE9 u Opera, se deberá usar el código siguiente:
.box_shadow {
box-shadow: 2px 2px 4px # eaeaea;
}