Propiedades de formato avanzado para las cajas HTML

Dentro de las características de CSS3 tenemos nuevos atributos que permiten modificar de forma radical la apariencia de cualquier contenedor, haciendo que su forma final sea muy diferente al rectángulo habitual que suponemos a cualquier contenedor. Vamos a empezar viendo cómo podemos trabajar con las esquinas del contenedor, para conseguir efectos redondeados, y modificar la apariencia de nuestro documento.

Border-radius

La propiedad border-radius nos permite definir un ángulo de redondeo para las esquinas de un contenedor. Su definición es muy sencilla, sólo con definir un valor de redondeo conseguiremos que las cuatro esquinas del elemento aparezcan redondeadas de forma uniforme. En cuanto a las unidades que podemos utilizar, tenemos disponibles las habituales para definir tamaños en CSS: píxeles, porcentajes, ems, rems, puntos, etc.

Podemos definir esta propiedad de las siguientes maneras

Ejemplo


<div class="redondeado"></div>

Con el CSS

.redondeado {
	border:4px solid;
	width: 240px;
	height: 240px;
	border-radius: 15px;
}

tenemos

Sintaxis extendida

Como vemos en las definiciones anteriores la propiedad border-radius es un shorthand para definir los valores de redondeo de cada una de las esquinas del documento. Sus cuatro valores completos son:

Un shorthand permite declarar una propiedad de forma abreviada, sin tener que escribir varias veces lo mismo. Al definir el border-radius según los valores de la lista anterior remplazamos estas propiedades logrando el mismo resultado. Ejemplos de shorthand son las propiedades border, margin, padding y background, entre otros.

Border no regulares

Cuando definimos un solo valor de redondeo en la propiedad border-radius lo que estamos haciendo es establecer el radio de un círculo que aplicaremos sobre las esquinas del elemento para redondearlas. Esto devuelve un efecto de redondeo regular, puesto que es una circunferencia la que define tal redondeo. Pero podemos hacer que la forma de las esquinas sea elíptica en lugar de circular si definimos un valor doble de redondeo, que se refiere a los dos radios que definen la elipse con la que modificamos los bordes.

Ejemplo


<div class="elipse"></div>

Con el CSS

.elipse {
	border:4px solid;
	width: 240px;
	height: 240px;
	border-radius: 15px/50px;
}

tenemos

La propiedad border-radius: 15px/50px; definida en el elemento anterior equivale a:

Y si la definimos así: border-radius: 5px 10px 15px / 4px 8px; equivaldría a:

Redondeo aplicado a imágenes

Podemos aplicar la propiedad border-radius directamente a las imágenes para conseguir el mismo efecto de redondeo en sus esquinas. Usando esta técnica podemos conseguir imágenes totalmente circulares simplemente con aplicar un valor de redondeo del 50%

Con esta sencilla regla conseguimos una imagen circular:


	<img src="venecia.jpg" class="img-rnd">
	
CSS:

.img-rnd {
	border-radius: 50%;
}

Nota: Esta regla funciona bien, siempre y cuando las imágenes sean cuadrados perfectos. Si son rectángulares, el redondeo devolverá una elipse. Para trabajar imágenes rectangulares seguiremos los pasos del siguiente apartado.

tenemos

Centrar y recortar una imagen en su contenedor

Aunque esta técnica no tiene que ver directamente con la propiedad border-radius vamos a aprovechar que estamos modificando la presentación de las imágenes para ver como podemos recortar y centrar una imagen en un marco contenedor usando unicamente CSS. El resultado será una imagen rectangular centrada en un marco cuadrado. Esta técnica es útil cuando estamos construyendo un elemento tipo "galería de imágenes".

Modo 1. Imagen dentro de contenedor mediante <img>

Estos son los elementos

Imagen:

Marco:

Con el siguiente código


	<div class="marco">
		<img src="lluvia.jpg" alt="">
	</div>
			
Y el CSS

	.marco {
		width: 360px;
		height: 360px;
		border-radius: 10%;
		border:5px solid;
		overflow: hidden;
	}
	.marco img {
		margin-left: -130px;
		height: 100%;
		width: auto;
	}

Tenemos

Comentario

En este caso lo que hacemos es ajustar la imagen al contendor por su lado más pequeño, que en este caso es la altura, para eso definimos height: 100%;. Además ajustamos la anchura para que no se deforme la imagen con width: auto;.

En segundo lugar, para centrar la imagen lo que hacemos es calcular la diferencia de anchura entre la imagen y su contenedor, que en este caso es de 260 píxeles, y para conseguir que quede centrada en el contenedor le aplicamos un margen izquierdo negativo (para que se desplace hacia la izquierda) con un valor igual a la mitad de la diferencia (130px).

Por último, para que la imagen no desborde el contenedor a este (.marco) le hemos aplicado overflow: hidden;

Modo 2. Imagen como fondo del contenedor con background-image

En este caso la imagen la añadimos mediante CSS al fondo del elemento, sin recurrir a la etiqueta HTML



<div class="marco" id="miniatura">
<div class="marco" id="mini2">

	
Y el CSS

#miniatura, #mini2 {
	background-image: url('lluvia.jpg');
	background-size: cover;
	background-position: center;
}
#mini2 {
	border-radius: 50%;
	border: none;
}

Nos queda así

Tipo A

Tipo B

Comentario

Aquí simplemente ajustamos la imagen como fondo del elemento, y definimos su tamaño con el valor cover.Esto hará que la imagen crezca proporcionalmente hasta cubrir todo el contenedor, excediendo su tamaño por el lado más grande del contenedor. Para controlar esa parte de la imagen que sobrepasa el contenedor aplicamos background-position: center; esto hace que la imagen quede tanto centrada en horizontal como en vertical.

Resulta evidente que este método es mucho más rápido y sencillo de aplicar, pues no requiere de cálculos previos para saber qué valores tenemos que aplicar al CSS de la imagen. Y por otro lado siempre centrará la imagen en su contenedor, con independencia de los tamaños de la imagen y el contenedor. Su principal inconveniente es que la imagen en este caso no forma parte del contenido HTML del documento, porque se define a través del CSS.