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

Css3 Spinners

Css3 Spinners

Ondas con SVG y CSS

Ondas con SVG y CSS

Un waffle con CSS

Un waffle con CSS

Algunos artículos que te pueden interesar

Entendiendo la propiedad perspective (perspectiva) en CSS

Entendiendo la propiedad perspective (perspectiva) en CSS

La propiedad perspective agrega un efecto tridimensional afectando la distancia que hay entre un observador y las figuras en el plano a través de una variación en el eje Z; en otras palabras, permite acercar/alejar figuras en el plano.

Andrés Cruz 05-02-2015

Creando una caja de luz difuminada con CSS

Creando una caja de luz difuminada con CSS

Se explica cómo crear una caja de luz difuminada en fondo y se presentan algunas variantes del experimento.

Andrés Cruz 11-05-2017

¿Cómo mostrar imágenes pixeladas con CSS3?

¿Cómo mostrar imágenes pixeladas con CSS3?

En esta entrada veremos comos mostrar imágenes pixeladas mediante la propiedad image-renderin en conjunto con su valor pixelated.

Andrés Cruz 20-08-2015