Imagen circular con CSS

No es necesario recortar la imagen con un editor. En el caso de Betty, la imagen es cuadrada.

El truco está en indicar al navegador, mediante CSS, que reondee las esquinas de la foto y que oculte lo que se sale del marco.

Funciona así:

<style type="text/css"> 

/* Usando border-radius (para todos los navegadores) y overflow:hidden , se logra el efecto en la IMG */

.imagen {

 width: 200px;

 height: 200px;

 border-radius: 100px;

 -moz-border-radius: 100px;

 -webkit-border-radius: 100px;

 -khtml-border-radius: 100px;

 overflow: hidden; 

} 

</style>


¡Así de fácil! Luego agregas la class a la imagen y ya lo ves.


<img src="BettyPage.jpg" class="imagen" alt="Imagen circular usando CSS" />