Este post simplemente lo escribo para aquellos que alguna vez piensan en usar bordes redondos. Es mucho más fácil de lo que parece. Además, también incluyo para hacer sombras y voltear o deformar. Lo malo de los siguientes códigos, es que solo funcionan para Firefox.
Para una breve explicación de cada código, pasar el ratón por encima de su código.
-moz-border-radius: 10px;A mayor número, más redondeado
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 45px;Redondeando cada borde
-moz-border-radius-topright: 180px 40px;
-moz-border-radius-bottomright: 180px 40px;El primer parámetro de ambas
hace referencia a la parte redonda
más cercana al centro.
El segundo parámetro hace referencia
a la parte redonda del extremo.
Cuantos más píxeles, más redondeo.
-moz-border-radius: 20px 40px;Redondeando esquinas dos a dos
El primero son los bordes
izquierda-superior y derecha-inferior
y el segundo son los bordes
derecha-superior e izquierda-inferior
-moz-border-radius: 100px / 50px;Elíptico
-moz-transform: rotate(-25deg);Rotación por grados. Se pueden
poner valores negativos.
-moz-transform: skew(40deg,15deg);Desviación y deformación.
-moz-box-shadow: -20px 20px 10px rgba(
255, 0, 0, 0.5);Sombra
Los dos primeros parámetros, son la
distancia izq-dcha y sup-inf
respectivamente. Se pueden poner
valores negativos.El siguiente
parámetro, es la transparencia.
El siguiente hace referencia al
color (cantidad de rojo,
verde, azul y negro respectivamente)