Como fazer um círculo com CSS de forma fácil

Neste post vamos ver como fazer um círculo com CSS puro, não utilizando imagens ou qualquer outra recurso externo, para ter um código de fácil manutenção e performático

Este conteúdo está disponível em vídeo também:

Como fazer um círculo com CSS: teoria

Bom, para criarmos esta figura geométrica amplamente utilizada com CSS, devemos partir de um quadrado

Então um elemento de HTML com width e height estabelecidas é necessário

A partir daí a única coisa que precisaremos fazer é adicionar um border-radius de 50%

E então o CSS se encarregará de realizar o círculo

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Círculo com CSS: prática

Agora vamos ver na prática como criar o círculo

A estrutura de HTML pode ser feita dessa forma, utilizei uma div neste caso, mas pode ser qualquer elemento, veja:

<div id="circulo"></div>

Agora com CSS, vamos criar nosso quadrado:

#circulo {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 50px;
}

Note que o background-color é só para se destacar do fundo branco do HTML, você pode colocar qualquer cor

E a margin é para afastar do canto do navegador para o printscreen, estas duas regras são opicionais

Neste ponto teremos o seguinte resultado:

Agora quando completamos o código com o border-radius:

#circulo {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    background-color: red;
    margin: 50px;
}

Temos o seguinte resultado:

E então o círculo está completo, legal né? 😀

Então apenas com essas poucas linhas de código temos algo mais fácil de dar manutenção do que se fosse por imagem

Imagina criar uma nova imagem toda vez que este círculo mudar de cor ou tamanho, seria tenso!

Além de ter que requisitar um arquivo mais do seu servidor, precisa otimizar a imagem…

São vários motivos que levam criar uma figura só com CSS ser mais vantajoso

Código final para quem não quer ler tudo

Ta com pressa? ta na mão!

<!-- HTML -->
<div id="circulo"></div>

/* CSS */
#circulo {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    background-color: red;
    margin: 50px;
}