Comunidad de diseño web y desarrollo en internet online

Bordes redondeados en CSS3 con border-radius

CSS3 trae una serie de novedades en el manejo de bordes de elementos. Tareas tan complicadas hasta ahora como crear una esquina redondeada o usar imágenes en los bordes serán ahora asombrosamente sencillos.

Bordes redondeados con border-radius

Hasta ahora era un auténtico quebradero de cabeza y una pérdida de tiempo crear un borde redondeado teniendo que utilizar imágenes de fondo o recurriendo a hacks. El atributo border-radius simplifica su implementación como vemos a continuación:

Código :

border-radius:15px;

Como resultado tendríamos una capa con todas las esquinas redondeadas.

Consejo: Como siempre, para optimizar la compatibilidad con los navegadores es conveniente usar los prefijos -webkit- y -moz-.

Si quisiéramos usar diferentes radios en cada esquina la sintaxis shorthand sería:

Código :

border-radius:15px 0px 25px 0px;

La imagen superior usa un sólo radio para todas las esquinas, mientras que la inferior lo varía.

Importante: Los valores dados al atributo border-radius se empiezan a aplicar desde la esquina superior izquierda en sentido horario

Para indicar el radio de cada esquina sin usar shorthands seguimos la siguiente sintaxis:

Código :

/*border-y-x-radius: valor;*/

border-top-left-radius: 15px; 

/*Equivale a:*/

border-radius: 15px 0px 0px 0px;

Para darle una vuelta de tuerca, podemos indicar dos radios en lugar de uno de la manera que se muestra en la siguiente imagen:

Podéis ver un ejemplo del resultado en ambos casos.

Bordes con imágenes

El atributo border-image nos habilita para usar imágenes de fondo para los bordes de nuestros elementos.

Para entender el funcionamiento de este atributo, empezaremos por crear una imagen de prueba, en mi caso es esta:

Observad como las guías la dividen en una malla de 9 secciones, cada una de 12 x 12 px. No es obligatorio pero nos servirá para entender mejor el concepto.

La sintaxis a usar es la siguiente:

border-image: url("ruta de la imagen") arriba derecha abajo izquierda modificador modificador;

Código :

border-image: url("borde.png") 12 12 12 12 repeat repeat;

La url hace clara referencia a la imagen que vamos a usar de borde. Para entender perfectamente las cuatro medidas que damos, pensemos en las guías del dibujo. Con la primera medida indicaríamos a que distancia estaría la guía horizontal superior, con la segunda la guía vertical derecha, con la tercera la guía horizontal inferior y con la cuarta la guía vertical izquierda. Como dicen que una imagen vale más que mil palabras:

Lógicamente si sólo diésemos una medida, esta se aplicaría a todas las distancias y para las mismas podemos indicar cantidades porcentuales.
Los modificadores indican como actuar en caso de que el borde sea mayor que las medidas de la imagen. Puede tomar tres valores:

  • stretch. "Estira" cada uno de los sectores de la malla para adaptarlos a la distancia de borde a cubrir.

    Fijaos en la zona central y como se ha estirado ocupando todo el espacio.
  • repeat. Repite el patrón de cada sector de la malla a lo largo de la distancia de borde.

    La imagen se repite, y en ocasiones se queda cortada.
  • round. Repite el patrón de cada sector de la malla modificando su escala para adaptar las repeticiones a la distancia del borde.

    La imagen se repite adaptándose para que no se corte.
Importante. En chrome round reproduce el mismo efecto que repeat

En este ejemplo veréis el resultado de cada uno.

En el próximo capítulo trataremos las nuevas opciones de CSS3 para editar los fondos de nuestros elementos.

 

Información adicional

® Cristalab 2011

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.