03.01.2025

Como Recortar um Retângulo em um Círculo com CSS: Centralização e Raio

Resumo Rápido

Para criar uma imagem circular a partir de uma retangular usando CSS, defina as propriedades do contêiner como border-radius: 50% e overflow: hidden, além de aplicar flexbox para centralizar a imagem.

<div class="circle-crop">
  <img src="imagem.jpg" alt="Imagem circular"/>
</div>

.circle-crop {
  width: 200px; height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 50%;
}

.circle-crop img {
  height: 100%;
  width: auto;
}

Essa abordagem permite transformar qualquer imagem retangular em um perfeito círculo, mantendo suas proporções e centralizando sem distorções.

Guia Detalhado

Manipulação de Imagem com Object-Fit

Para resultados ótimos de recorte circular, use a propriedade object-fit: cover, que permite que a imagem preencha completamente o contêiner, evitando distorções.

.circle-crop img {
  object-fit: cover; /* A imagem se ajusta perfeitamente */
}

Esse método é ideal para lidar com imagens de várias larguras e proporções.

Suporte a Navegadores

Se você precisa garantir compatibilidade com navegadores mais antigos que não reconhecem object-fit, use uma imagem de fundo para o contêiner – isso garantirá o recorte em qualquer navegador.

.circle-crop {
  background: url('imagem.jpg') no-repeat center center; 
  background-size: cover; /* Garante que o fundo esteja completamente preenchido */
}

Sempre verifique o suporte a navegadores para object-fit e clip-path antes de usá-los.

Considerações sobre Design Responsivo

Para garantir que seu recorte circular escale junto com o tamanho da janela do navegador, use valores percentuais para as propriedades width e height.

.circle-crop {
  width: 50%;
  height: 0;
  padding-bottom: 50%; /* Garante margens iguais, resultando em um círculo */
}

Para uma escala mais suave, também defina border-radius em porcentagens.

Visualização

Transformamos um quadrado (🟦) em um círculo (🔵). O elemento quadrado inicial (🟦) é convertido em um círculo perfeito (🔵) graças aos estilos CSS aplicados de forma adequada:

.img-circle {
    border-radius: 50%;  /* Passo em direção à forma perfeita */
    overflow: hidden;    /* Limpeza e completude da forma */
}

Recursos Adicionais com Clip-Path

A propriedade clip-path permite criar formas mais complexas ou recortes circulares particularmente nítidos:

.circle-crop {
  clip-path: circle(50%);
}

Antes de usar esse método, certifique-se de que os navegadores suportam clip-path.

Exemplos em Ação

Para dominar ainda mais essas habilidades em CSS, experimente na prática criando exemplos em plataformas como CodePen ou JSFiddle:

Experimente você mesmo: [Exemplo no CodePen](https://codepen.io/seuExemplo)

Recursos Úteis

1. Recorte e Máscara em CSS | CSS-Tricks — um guia detalhado sobre a aplicação dessas técnicas em CSS.
2. border-radius - CSS | MDN — documentação oficial sobre a propriedade border-radius.
3. border-radius em porcentagens e pixels - discussão no Stack Overflow — explorando as nuances de usar diferentes unidades para border-radius.
4. Suporte a Navegadores para border-radius | Can I use — verificação do suporte a navegadores para a propriedade border-radius.
5. Criando Imagens Arredondadas com CSS — um guia simples para formar imagens arredondadas.
6. aspect-ratio | MDN — informações sobre como controlar as proporções, o que é importante ao recortar imagens.

Video

Navigation