Saltar para o conteúdo

Gerador de cantos arredondados (border-radius)

Ajuste o raio de cada canto separadamente e obtenha o código CSS border-radius com pré-visualização.

É processado no seu dispositivo. Nada é enviado para nenhum servidor.
border-radius: 24px 24px 24px 24px;

Ajuste o raio de cada canto de um elemento de forma independente e obtenha o código CSS border-radius com pré-visualização em tempo real.

Gera a sintaxe abreviada de border-radius com os quatro valores na ordem superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo.

Casos de uso

  • Criar um cartão com cantos assimétricos.
  • Desenhar um elemento em forma de gota ou balão de chat.
  • Ajustar visualmente o arredondamento de um botão.

Como funciona

  1. 1

    Ajuste cada canto

    Introduza o raio em pixels para cada um dos quatro cantos.

  2. 2

    Copie o CSS

    Copie a propriedade border-radius pronta para colar.

Perguntas frequentes

Posso definir um raio diferente para cada canto?

Sim, cada um dos quatro cantos é controlado de forma independente.

Cores e design