Gerador de border-radius CSS

O que é Gerador de border-radius CSS?

O gerador de border-radius CSS é um editor visual gratuito para a propriedade CSS border-radius, feito para desenvolvedores front-end e designers. Use os controles deslizantes e os campos numéricos para definir o raio horizontal e vertical de cada canto em pixels, escolha uma unidade e ative o modo elíptico para obter a sintaxe com barra dos cantos ovais. Uma caixa de prévia mostra a forma arredondada em tempo real, e a declaração abreviada e compacta é gerada para você copiar. Escolha uma predefinição como Arredondado, Pílula, Círculo ou um Blob orgânico no controle segmentado para começar rápido e, então, ajuste cada canto. Use-o para criar cartões suaves, botões em pílula, círculos perfeitos, squircles e formas decorativas em gota sem decorar a ordem dos cantos.

Como usar Gerador de border-radius CSS

1. Escolha uma predefinição (Arredondado, Pílula, Círculo ou Blob) no controle segmentado para carregar uma forma inicial.
2. Arraste o controle deslizante de cada canto ou digite um número para definir o raio horizontal desse canto.
3. Ative Elíptico para revelar um segundo raio vertical por canto e produzir cantos ovais com a sintaxe de barra.
4. Escolha a unidade (px ou %) nas configurações; as porcentagens escalam o raio com o tamanho da caixa.
5. Observe a prévia ao vivo se atualizar e copie o border-radius abreviado gerado para a sua folha de estilos.

Exemplos

Os quatro cantos 16, elíptico desativado

border-radius: 16px;

Predefinição Pílula, todos os cantos 9999

border-radius: 9999px;

SE 40/20, SD 10, ID 40/20, IE 10, elíptico ativado

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Perguntas frequentes

Em que ordem ficam os quatro cantos?

A forma abreviada lista os cantos no sentido horário começando pelo superior esquerdo: superior esquerdo, superior direito, inferior direito, inferior esquerdo. Esta ferramenta sempre escreve os quatro valores nessa ordem, então o resultado é inequívoco e fácil de ajustar à mão depois.

O que o modo elíptico faz?

O border-radius pode receber um raio horizontal e um vertical por canto, separados por uma barra, para desenhar cantos ovais (elípticos) em vez de circulares. Ative Elíptico para definir um segundo raio vertical em cada canto; a saída passa a usar a sintaxe de barra 'horizontal / vertical'.

Devo usar px ou porcentagem?

Pixels dão um tamanho de canto fixo, independente da caixa. As porcentagens são relativas à largura e à altura da caixa, então 50% em cada canto transforma um quadrado em um círculo perfeito e o arredondamento escala conforme o elemento é redimensionado. Troque a unidade nas configurações.

Como faço um círculo perfeito ou uma pílula?

Escolha a predefinição Círculo (50% em cada canto) para um círculo a partir de um quadrado, ou a predefinição Pílula (um raio em pixels bem grande) para que os lados curtos virem semicírculos completos. Você também pode partir de uma predefinição e ajustar cantos específicos.

Meus dados são enviados para algum lugar?

Não. O gerador roda inteiramente no seu navegador com JavaScript — seus valores de raio nunca são enviados a um servidor, então ele funciona de forma privada e até offline depois que a página carrega.