Hola, que tal?
Últimamente elegir
CSS3 se convierte en una elección común entre los diseñadores web y aunque son conceptos relativamente nuevos han tenido tal acogida que un gran porcentaje de los sitios modernos integran una o más de las nuevas "ventajas".
Es por ello que en este post vamos a repasar una de ellas y que seguramente te será de gran utilidad en el futuro si piensas diseñar una interfaz web agradable y funcional obviando hacer uso exagerado de imágenes y otros recursos que ahora pueden ser fácilmente reemplazados por CSS3.
En esta primera parte vamos a tratar con
border-radius, actualmente bien conocido por muchos y usado por la mayoría.
1. - Uso
A. Podemos aplicarlo de forma general (para las 4 esquinas):
 | #ejemplo {
border-radius: 15px;
}
Aplica un radio de 15px para los cuatro (4) lados. |
B. También puedes aplicarlo a algún lado específico:
 | #ejemplo {
border-bottom-right-radius: 15px;
}
Aplica un radio de 15px en la esquina inferior derecha. |
C. Añade dos (2) valores para crear radios
asimétricos.
 | #ejemplo {
border-bottom-right-radius: 30px 60px;
}
Aplica un radio de 30px para un lado, y de 60px para el otro. |
D. Asigna valores distintos para cada lado:
 | #ejemplo {
border-radius: 30px 60px 30px 60px;
}
Así podrás obtener un radio especifico en cada esquina. |
2. - Compatibilidad
Aunque CSS3 nos da la posibilidad de usar esta función de esta manera:
border-radius: {valor}; muchos navegadores no la reconocen hasta la fecha, esto es una desventaja a la hora de crear y diseñar un sitio que garantice compatibilidad con la mayoría o todos.
Es por ello que lo más recomendable es añadir unas cuantas líneas de código más pero enfocadas a trabajar en los navegadores, por ejemplo con el radio general:
CSS3:border-radius: {valor};
Mozilla Firefox:-moz-border-radius: {valor};
Opera/Safari:-webkit-border-radius: {valor};
Y para los radios específicos:
| Descripción: | | | CSS3 | | | Mozilla Firefox | | | Otros |
| superior izquierda | | | border-top-left-radius | | | -moz-border-radius-topleft | | | -webkit-border-top-left-radius |
| inferior izquierda | | | border-bottom-left-radius | | | -moz-border-radius-bottomleft | | | -webkit-border-bottom-left-radius |
| superior derecha | | | border-top-right-radius | | | -moz-border-radius-topright | | | -webkit-border-top-right-radius |
| inferior derecha | | | border-bottom-right-radius | | | -moz-border-radius-bottomright | | | -webkit-border-bottom-right-radius |
Así podemos asegurar que la cobertura de nuestro diseño se extienda a más navegadores.
NOTA:Este post ha sido un repaso básico acerca de "border-radius" de CSS3, aquí vemos en acción los conceptos más básicos del mismo. para obtener más información sobre este tema puedes visitar varias fuentes de información que también podrán servir de referencia:
-
http://www.css3.info/-
http://border-radius.com/-
http://w3schools.com/Gracias.
