Pular para o conteúdo
Toolars
Explorar

Gerador de border-radius CSS

CSS Border Radius Generator

Oito raios horizontais e verticais; exporte cantos elípticos como CSS pronto para copiar.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

Caminho da tarefa / da entrada ao resultado

Como moldar um border-radius em CSS

  1. 01

    Escolha a unidade

    Defina a Unidade como Pixels ou Porcentagem — o espaço de trabalho começa em Pixels. Pixels permanecem constantes em qualquer tamanho de elemento; valores em porcentagem escalam com o elemento, que é o que torna possíveis formas orgânicas e assimétricas.

  2. 02

    Ajuste os quatro cantos

    Mova Superior esquerdo, Superior direito, Inferior direito e Inferior esquerdo — cada um de 0 a 100 na unidade escolhida, em passos de 1. Os quatro começam em 24 px, e o cartão de pré-visualização se redesenha a cada mudança.

  3. 03

    Vincule ou desvincule os cantos

    Mantenha Vincular todos os cantos ligado para mudar todos os cantos de uma vez, ou desligue para moldar cada canto independentemente. O espaço de trabalho afirma isso ao lado do interruptor: mudar um canto atualiza os quatro enquanto vinculados.

  4. 04

    Experimente a forma de exemplo

    Pressione Carregar exemplo para uma referência assimétrica: Superior esquerdo e Inferior direito em 64 px, Superior direito e Inferior esquerdo em 12 px, desvinculados — a forma de folha diagonal usada em cartões e avatares. Redefinir volta ao padrão uniforme de 24 px.

  5. 05

    Adicione raios verticais

    Em Raios verticais, dê a cada canto um segundo valor de 0 a 100 na mesma unidade. A primeira alteração desliga Vincular todos os cantos e escreve a declaração como horizontal / vertical: quatro valores em sentido horário a partir do canto superior esquerdo, uma barra e mais quatro, o que deixa os cantos elípticos. O selo de status mostra CSS VÁLIDO; qualquer valor fora do intervalo o troca para REVISE OS VALORES e bloqueia a cópia e o download.

  6. 06

    Copie ou baixe o CSS

    Exporte o resultado atual. CSS / HTML. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de border-radius CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de border-radius CSS realmente faz

Cantos arredondados definem o tom de uma interface: 8 px para um formulário discreto, 24 px para um cartão amigável, valores totalmente assimétricos para o blob orgânico atrás de uma seção de destaque. Adivinhar quatro números em uma folha de estilos é lento, especialmente em porcentagem, onde a curva depende das proporções do elemento. O Gerador de border-radius CSS mostra a forma exata enquanto você arrasta, com os cantos vinculados para arredondamento uniforme ou desvinculados para formas de folha e blob. Depois, ele entrega a declaração — renderizada e validada localmente.

Perguntas frequentes

Qual a diferença entre Pixels e Porcentagem?
Pixels dão a cada canto um raio fixo, independentemente do tamanho do elemento. Porcentagem resolve contra as dimensões do elemento, então o mesmo valor produz uma curva diferente em um cartão alto e em um largo — essa relatividade é exatamente o que possibilita formas de elipse e blob. Oito raios horizontais e verticais; exporte cantos elípticos como CSS pronto para copiar. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
O que Vincular todos os cantos faz?
Enquanto vinculados, mudar qualquer canto atualiza os quatro para o mesmo valor, o que torna o arredondamento uniforme rápido. Desligue o interruptor para controlar Superior esquerdo, Superior direito, Inferior direito e Inferior esquerdo independentemente — o exemplo assimétrico predefinido é construído assim.
Como obtenho um círculo ou elipse perfeitos?
Mude a Unidade para Porcentagem e defina os quatro cantos em 50: em um elemento quadrado o resultado é um círculo perfeito, e em um retangular, uma elipse. Essa é a técnica padrão para avatares e pílulas, e a pré-visualização a mostra antes de você copiar qualquer coisa.
border-radius · O que a exportação contém?
border-radius: a b c d / e f g h. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
Quais são os limites?
Cada canto aceita de 0 a 100 na unidade selecionada, em passos de 1. Valores fora do intervalo são destacados com VERIFIQUE OS VALORES, e copiar ou baixar fica bloqueado até serem corrigidos.
Algo é enviado ou armazenado?
Não. A pré-visualização e o CSS gerado são calculados dentro desta aba do navegador, e nenhum valor gerado entra em armazenamento, registros, análise ou rede.

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar