Saltar para o conteúdo
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Gerador de cantos arredondados (border-radius)

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

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

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

Casos de uso

  • Criar um cartão com cantos assimétricos.
  • Desenhar uma forma de gota ou de balão de conversa.
  • Afinar visualmente o arredondamento de um botão.

Como funciona

  1. 1

    Ajuste cada canto

    Introduza o raio em píxeis para cada um dos quatro cantos.

  2. 2

    Copie o CSS

    Copie a propriedade border-radius pronta a colar.

Detalhes técnicos

  • Cada canto admite de 0 a 200 píxeis. O código segue a ordem do CSS: superior esquerdo, superior direito, inferior direito, inferior esquerdo.
  • Se o raio ultrapassar metade do lado do elemento, o navegador reduz-o proporcionalmente; por isso, um valor muito alto num botão pequeno dá uma forma de pílula.
  • Só trabalha em píxeis. Para um círculo perfeito num elemento quadrado de qualquer tamanho, escreva manualmente border-radius: 50%.

Perguntas frequentes

Posso definir um raio diferente em cada canto?

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

Ferramentas relacionadas

← Cores e design