Como fazer um círculo em HTML

Usando CSS3 há um truque simples pra desenhar um circulo em HTML usando 50% border-radius.

Primeiro, faz lá uma div.

<div> Tidbits </div>

E agora um pouco de CSS na div.

div{
background:#fa0c01;
color:#fff;
width:300px;
height:300px;
line-height:300px;
vertical-align:middle;
text-align:center;
font-size:30px;
}
 

Como fazer círculos com border-radius

Agora, o border-radius de 50%

 div{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
 

Resultado:

Circulo com HTML

Usando máscaras em imagens

O mesmo truque pode ser feito com imagens e funciona como se fosse uma máscara:

Imagem normal:

CSS aplicado:

img{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}

Resultado:

Funciona em IE9+, Firefox, Chrome, Safari, etc.

This entry was posted in CSS, HTML5 by Danilo. Bookmark the permalink.

About Danilo

Danilo é desenvolvedor front end e back end. Gosta de tênis, de acompanhar o Corinthians e de jogar futebol de videogame (no futebol de verdade ele é muito ruim).

4 thoughts on “Como fazer um círculo em HTML

  1. Pingback: » Desenhando setas no HTML sem usar imagem (cross browser)

Leave a Reply

Your email address will not be published. Required fields are marked *