Pular para o conteúdo
SPCX Tools

Border Radius

Crie bordas arredondadas e formas CSS visualmente, depois copie o código com um clique.

Roda localmente — os arquivos não saem do seu dispositivo

Carregando ferramenta…

Como usar: Border Radius

  1. 1Escolha a unidade de sua preferência ("px" para curvas fixas ou "%" para formas responsivas).
  2. 2Use a caixa de seleção "Vincular cantos" para ajustar todos os cantos juntos, ou desmarque para definir valores individuais para cada um.
  3. 3Arraste os controles deslizantes para ajustar o border radius e veja a pré-visualização da forma atualizar em tempo real.
  4. 4Você também pode clicar em um dos botões de predefinição para criar instantaneamente formas comuns, como pílulas, círculos, abas ou folhas.
  5. 5Copie o código CSS gerado na parte inferior para usar na sua folha de estilos.

Um gerador visual de border radius

Criar as bordas arredondadas perfeitas para seus componentes web não deveria exigir adivinhar números e atualizar o navegador constantemente. Este gerador visual de border radius permite ajustar controles deslizantes e ver instantaneamente como as curvas afetam um elemento. Assim que alcançar o visual exato que deseja, você pode copiar o código CSS otimizado direto para a sua área de transferência.

Como todos os cálculos e visualizações são processados localmente pelo seu navegador, a ferramenta é incrivelmente rápida e totalmente privada. Nada do que você cria ou clica é enviado para um servidor.

Dominando as bordas arredondadas no CSS

A propriedade border-radius é uma parte fundamental do web design moderno, usada para suavizar bordas retas em botões, imagens, modais e contêineres de layout. Embora pareça simples à primeira vista, a sintaxe pode ser surpreendentemente cheia de nuances quando você deseja focar em cantos específicos.

Este gerador de border-radius css ajuda você a entender e utilizar a sintaxe abreviada do CSS de forma eficaz. Quando você vincula todos os cantos, a ferramenta gera um único valor (por exemplo, border-radius: 16px;). Se você desvincular os cantos para criar uma forma personalizada, o gerador formata automaticamente o CSS com base nas suas entradas:

  • Quatro valores: Se todos os cantos forem diferentes, o CSS os aplica em sentido horário, começando pelo canto superior esquerdo (ex.: border-radius: 16px 8px 4px 2px;).
  • Dois valores: Se o canto superior esquerdo for igual ao inferior direito, e o superior direito for igual ao inferior esquerdo, a ferramenta resume o código de forma inteligente em dois valores (ex.: border-radius: 16px 0;).

Pixels vs. Porcentagens

Um dos dilemas mais comuns ao criar bordas arredondadas no CSS é escolher a unidade certa. Esta ferramenta permite alternar facilmente entre pixels (px) e porcentagens (%), cada uma com um propósito distinto no design de UI.

Pixels (px) são unidades absolutas. Um border radius de 12px sempre terá a mesma aparência, seja aplicado a um botão pequeno ou a uma imagem de destaque gigante. Pixels são a escolha padrão para componentes de UI como cards, menus dropdown e campos de input, pois mantêm uma linguagem de design consistente e uniforme em todo o seu aplicativo. Esta ferramenta permite valores em pixels de até 200px.

Porcentagens (%) são relativas ao tamanho do próprio elemento. Um border radius de 50% em um elemento quadrado sempre criará um círculo perfeito, não importa se o quadrado tem 50 ou 500 pixels de largura. Se o elemento for um retângulo, 50% criará uma forma oval elíptica. Porcentagens são ideais para elementos responsivos, como avatares de perfil ou blobs decorativos de fundo. Esta ferramenta limita os valores de porcentagem a 50%, já que valores acima disso não aumentam o efeito visual de arredondamento no CSS.

Além dos cantos básicos: Um gerador de formas CSS

Embora seja mais usado para arredondamentos sutis, o border-radius também é um poderoso gerador de formas CSS. Ao desvincular os cantos e misturar valores extremos, você pode criar formas geométricas únicas sem precisar de arquivos SVG ou clip-paths complexos. A ferramenta inclui várias predefinições para demonstrar isso:

  • Pílula: Ao aplicar um valor em pixels artificialmente alto (como 9999px) a todos os cantos, você cria uma forma de "pílula" ou estádio. Isso é muito usado para badges, tags e botões de call-to-action modernos. O navegador limita o arredondamento real a exatamente metade da altura do elemento, garantindo semicírculos perfeitos nas bordas.
  • Círculo: Definir todos os cantos como 50% transforma um quadrado em um círculo perfeito.
  • Folha: Ao definir os cantos superior esquerdo e inferior direito como 0, e os cantos superior direito e inferior esquerdo com um valor alto (como 48px), você cria uma forma de folha orgânica e assimétrica.
  • Aba: Ao arredondar apenas os cantos superior esquerdo e superior direito (ex., 16px) e deixar os cantos inferiores em 0, você cria uma forma clássica de aba de pasta, perfeita para menus de navegação.

Aperfeiçoando seus componentes de UI

Cantos arredondados raramente são usados de forma isolada; eles geralmente fazem parte de um sistema de design mais amplo e coeso. Um componente de card bem projetado, por exemplo, combina um border-radius sutil com profundidade e cor para se destacar na página.

Depois de gerar o border-radius ideal, você pode combiná-lo com outros efeitos CSS para completar o seu design. Experimente combinar sua nova forma com uma sombra suave usando nosso Gerador de Box Shadow para criar um efeito elevado e flutuante. Se estiver estilizando um botão ou um elemento de fundo decorativo, você pode aplicar um fundo vibrante usando o Gerador de Gradiente CSS, ou encontrar as cores sólidas complementares perfeitas com o Gerador de Paleta de Cores.

Perguntas frequentes

O que é a propriedade border-radius no CSS?
A propriedade CSS border-radius arredonda os cantos da borda externa de um elemento. Você pode definir um único raio para criar um círculo ou retângulo arredondado, ou especificar raios diferentes para cada canto para criar formas complexas.
Devo usar pixels (px) ou porcentagens (%)?
Use pixels (px) quando quiser uma curva fixa e consistente, independentemente do tamanho do elemento, como um card padrão com cantos arredondados de 8px. Use porcentagens (%) quando quiser que a curva seja proporcional ao elemento, como usar 50% para criar um círculo perfeito ou uma forma oval.
Como faço um círculo perfeito no CSS?
Para fazer um círculo perfeito, seu elemento HTML deve ter a mesma largura e altura (um quadrado), e o border-radius deve ser definido como 50%. Você pode usar a predefinição "Círculo" nesta ferramenta para gerar o código exato.
Como faço um formato de pílula?
Um formato de pílula é criado definindo um valor de pixel muito alto para o border-radius, como 9999px. Isso garante que as bordas esquerda e direita (ou superior e inferior) sejam semicírculos totalmente arredondados, independentemente da largura do elemento.
Por que o CSS gerado às vezes tem menos de quatro valores?
O CSS usa uma sintaxe abreviada (shorthand) para o border-radius. Se os quatro cantos forem iguais, ele gera um valor (ex.: 16px). Se o canto superior esquerdo/inferior direito forem iguais e o superior direito/inferior esquerdo também, ele gera dois valores. Isso mantém seu CSS limpo e conciso.
Meus dados de design são salvos em algum lugar?
Não, este gerador de border radius funciona totalmente no seu navegador. Nenhum dado é enviado ou armazenado em nenhum servidor, garantindo uma experiência rápida e privada.

Ferramentas relacionadas

Gerador de Box ShadowAjuste sombras suaves, nítidas, em camadas ou internas com visualização em tempo real e copie o CSS.Gerador de Gradiente CSSCrie um fundo gradiente visualmente e copie o CSS — linear, radial ou cônico.Gerador de Paleta de CoresEscolha uma cor e obtenha uma paleta harmoniosa de cinco cores baseada na teoria das cores.Simulador de DaltonismoVisualize suas imagens através dos olhos de alguém com deficiência de visão de cores para garantir que seus designs sejam acessíveis.Verificador de Contraste de CoresVerifique se o seu texto está legível — e obtenha a cor mais próxima que passa na WCAG.Conversor de CoresConverta qualquer cor entre HEX, RGB, HSL, HSV e CMYK e verifique seu contraste.