Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de border-radius CSS

CSS Border Radius Generator

Molde os quatro cantos independentemente em pixels ou porcentagem, ligados ou não, e copie a declaração border-radius de quatro valores.

Caminho da tarefa / da entrada ao resultado

Escolha a unidade

Roda localmente · Nada é enviado

Como Gerador de border-radius CSS funciona, privacidade e ferramentas relacionadas

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

    Confira a declaração gerada

    A saída sempre lista quatro valores em sentido horário — superior esquerdo, superior direito, inferior direito, inferior esquerdo — então cada canto fica explícito quando você cola. O selo de status mostra CSS VÁLIDO, e qualquer canto fora do intervalo muda para VERIFIQUE OS VALORES e bloqueia copiar.

  6. 06

    Copie ou baixe o CSS

    Pressione Copiar CSS para copiar a regra .rounded-card como uma declaração border-radius de quatro valores, ou Baixar .css para salvá-la como toolars-border-radius.css. A mesma declaração funciona em imagens, botões, cartões e qualquer outro elemento.

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.
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.
Por que a saída sempre lista quatro valores?
O CSS permitiria que valores idênticos colapsassem em forma abreviada, mas o gerador escreve os quatro cantos em sentido horário para que a declaração espelhe exatamente os quatro controles. O que você ajustou é o que você cola, sem ambiguidade sobre qual canto cada número molda.
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.

Continuar em Design

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

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

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar