La propiedad border-radius es la que nos permite "redondear" los bordes de casi cualquier un objeto:
-moz-border-radius: 10px; // en Firefox -webkit-border-radius: 10px; // en Chorme y Safari border-radius: 10px; // la propiedad según al w3.org
No es necesario que se redondeen los cuatro lados; funciona de manera similar a la propiedad border así que el orden es el mismo: arriba/izquierda arriba/derecha abajo/derecha y abajo izquierda así que podemos poner cuatro valores distintos:
-moz-border-radius: 10px 20px 30px 40px; -webkit-border-radius: 10px 20px 30px 40px; border-radius: 10px 20px 30px 40px;
si ponemos un solo valor: -moz-border-radius: 10px;
será lo mismo que escribir: -moz-border-radius: 10px 10px 10px 10px;
si ponemos dos valores:-moz-border-radius: 20px 5px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;
si ponemos tres valores: -moz-border-radius: 20px 5px 20px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;
Además, cada uno de ellos tiene una propiedad especial que también puede ser utilizada:
-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
Ahora bien, cuando pensamos en esto, nos imaginamos "círculos", obviamente, la palabra radius nos indica eso, el valor que le ponemos es el valor del radio de un círculo; tanto es así que podemos crear un círculo casi perfecto.
Si tenemos un elemento que mide 100x100 y le ponemos a border-radius un valor de 50, el resultado será esto:
será lo mismo que escribir: -moz-border-radius: 10px 10px 10px 10px;
si ponemos dos valores:-moz-border-radius: 20px 5px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;
si ponemos tres valores: -moz-border-radius: 20px 5px 20px;
será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;
Además, cada uno de ellos tiene una propiedad especial que también puede ser utilizada:
-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
Ahora bien, cuando pensamos en esto, nos imaginamos "círculos", obviamente, la palabra radius nos indica eso, el valor que le ponemos es el valor del radio de un círculo; tanto es así que podemos crear un círculo casi perfecto.
Si tenemos un elemento que mide 100x100 y le ponemos a border-radius un valor de 50, el resultado será esto:
Pero eso no es todo, en realidad, border-radius es una propiedad que también permite crear elipses y para eso, separamos los valores con una barra inclinada; por ejemplo:
-moz-border-radius: 20px / 5px; -webkit-border-radius: 20px / 5px; border-radius: 20px / 5px;
En esos casos, el primer valor es el radio horizontal y el segundo, el radio vertical.
TABLA - FUENTES - FONTS
Disculpen las Molestias
No hay comentarios:
Publicar un comentario