Fotos circulares con CSS

¿Estais cansados de las típicas fotos / imágenes cuadradas o rectangulares? Os voy a enseñar como conseguir el efecto de imagenes o fotos redondeadas utilizando CSS3 (se podrían utilizar otrás técnicas como utilizar una imagen transparente a modo de máscara…).

Para conseguir la forma circular usaremos una clase con la propiedad CSS3 «border-radius» que aplicaremos sobre el div o imágen que queramos aplicar el efecto circular, en este caso sobre la bandera de León que podéis ver al pinchar en el botón demo:

.circular {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	overflow:hidden;
}