DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-11-2013

Muchas veces al momento de estar haciendo una página web queremos introducir unos bordes redondeados a algún contenedor de información; antes de CSS3 nos veíamos obligados a utilizar imágenes, trayendo varios problemas o molestias, como por ejemplo:

Además del hecho de que si deseamos contenedores con distintos tamaños o si incluso cambiamos el tamaño del contenedor, pues debíamos comenzar todo otra vez.

En este artículo le enseñaremos como crear bordes redondeados con solo CSS, es decir, sin emplear imágenes en el proceso.

La propiedad border-radius para definir bordes con CSS

Para crear bordes redondeados a nuestros contenedores solo debemos aplicar la siguiente propiedad:

  border-radius

En donde debemos indicar el o los valores en alguna unidad de medida definidas por CSS; incluso podemos mezclarlas, veamos algunos casos:

Si quisiéramos dar un radio de 5px a nuestro contenedor:

  border-radius:5px;

En este primer caso, cuando solo colocamos un valor, el mismo se aplicará en todas las esquinas; sin embargo podemos declarar un valor para cada esquina:

  border-radius:5px 5px 5px 5px;

En donde cada pixel definido corresponde a alguna de las siguientes esquinas:

  border-radius:arriba-izquierda arriba-derecha abajo-derecha abajo-izquierda;

También se encuentra definida una propiedad para cada esquina:

Ejemplos del uso de la propiedad border-radius

Para hacer todas estas pruebas lo primero que vamos a crear es una simple DIV con un tamaño predeterminado y con un color de fondo. El resultado sería una contenedor con las esquinas redondeadas.

Para el siguiente contenedor:

<div class="contenedor1">contenedor con borde de 5px</div>

Aplicaremos las siguientes reglas; entre ellas nuestro border-radius:

.contenedor1 {
background-color: #0BF;
height: 200px;
width: 200px;
border-radius: 5px;
}

Obtenemos como resultado final:




contenedor con borde de 5px

También podemos definir distintos tamaños para las esquinas:

Aplicaremos las siguientes reglas; entre ellas nuestro border-radius:

.contenedor2 {
background-color: #0BF;
height: 200px;
width: 200px;
border-radius: 15px 0 15px 0;
}

Obtenemos como resultado final:




contenedor con borde dispar

Un equivalente del ejemplo anterior

.contenedor2_1 {
background-color: #0BF;
height: 200px;
width: 200px;
border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0;
/*border-radius: : 15px 0 15px 0;*/
}

Obtenemos el mismo contenedor que el ejemplo de arriba:




contenedor con borde dispar

Conclusiones

Esta es una propiedad de las más utilizadas al momento de hacer una página web; tiene un buen soporte en la mayoría de los navegadores modernos; por eso es importante conocerla y saber su funcionamiento el cual es muy sencillo.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Menú Radial con solo CSS

Menú Radial con solo CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Árbol arcoíris creciente

Árbol arcoíris creciente

Algunos artículos que te pueden interesar

El uso de la función step en las animaciones y transiciones en CSS

El uso de la función step en las animaciones y transiciones en CSS

La función steps() permite controlar el movimiento de las animaciones indicando el número de "frame" o saltos que queremos que conste una animación o transición.

Andrés Cruz 16-03-2015

Gradientes SVG en HTML

Gradientes SVG en HTML

En esta entrada veremos cómo definir y aplicar gradientes a cualquier SVG creado a partir de HTML; hay dos tipos de gradientes SVG que podemos emplear en nuestros diseños: lineal y radial.

Andrés Cruz 18-05-2015

Filtros en CSS3

Filtros en CSS3

Los filtros nos permiten aplicar una gran variedad de efectos como los de Photoshop o Gimp al contenido HMTL utilizando simplemente una sola línea de CSS.

Andrés Cruz 07-07-2013