Gerador CSS Border Radius — Cantos Arredondados Online

Gerador Border Radius

Todos os cantos: 16px

Definições

Unidade

Tamanho da pré-visualização: 200px

Cor de fundo

Código CSS

Biblioteca Border Radius

Formas básicas

Pré-visualização	Nome	Valor
	Quadrado	`0px 0px 0px 0px`
	Círculo	`50% 50% 50% 50%`
	Arredondamento leve	`4px 4px 4px 4px`
	Arredondamento suave	`8px 8px 8px 8px`

Elementos UI

Pré-visualização	Nome	Valor
	Botão padrão	`6px 6px 6px 6px`
	Botão arredondado	`24px 24px 24px 24px`
	Card padrão	`12px 12px 12px 12px`
	Janela modal	`16px 16px 16px 16px`

Formas orgânicas

Pré-visualização	Nome	Valor
	Blob orgânico 1	`30% 70% 70% 30%`
	Blob orgânico 2	`60% 40% 60% 40%`
	Blob suave	`40% 60% 40% 60%`
	Forma ondulada	`50% 50% 20% 80%`

Efeitos especiais

Pré-visualização	Nome	Valor
	Pílula horizontal	`100px 100px 100px 100px`
	Forma de emblema	`12px 12px 12px 12px`
	Forma de etiqueta	`4px 12px 12px 4px`
	Balão de fala	`12px 12px 12px 0px`

Guia de Border Radius

Unidades de border-radius

px (píxeis) — tamanho fixo, independente das dimensões do elemento
% (percentagem) — tamanho relativo, 50% cria um círculo/elipse
em — relativo ao tamanho da fonte do elemento
rem — relativo ao tamanho da fonte raiz, consistente em todo o projeto

Sintaxe de border-radius

Um valor — os 4 cantos: border-radius: 10px;
Dois valores — superior-esq/inferior-dir e superior-dir/inferior-esq: border-radius: 10px 20px;
Três valores — superior-esq, superior-dir/inferior-esq, inferior-dir: border-radius: 10px 20px 30px;
Quatro valores — superior-esq, superior-dir, inferior-dir, inferior-esq: border-radius: 10px 20px 30px 40px;

Dicas de utilização

Para botões use 4-8px para um aspeto suave
Para cards de conteúdo 8-16px é ótimo
A forma circular (50%) só funciona em elementos quadrados
Valores grandes (100px+) criam forma de pílula
Valores diferentes por canto criam formas orgânicas
Use % para formas orgânicas responsivas

Casos de Uso do Border Radius

Componentes UI e interfaces

Border-radius é a ferramenta principal para criar elementos UI modernos com bordas arredondadas suaves em vez de cantos afiados.

Exemplos:

Botões com cantos arredondados para melhor interação
Cards de conteúdo com arredondamento suave
Janelas modais e diálogos com cantos arredondados
Campos de entrada e formulários com bordas arredondadas
Emblemas e etiquetas com efeito pílula
Avatares de utilizador em forma circular (50%)

Design responsivo e UI móvel

Os cantos arredondados melhoram a percepção tátil em ecrãs táteis e tornam as interfaces mais amigáveis para dispositivos móveis.

Exemplos:

Bottom sheet e drawers com cantos superiores arredondados
Floating action button (FAB) em forma circular
Chips e filtros em forma de pílula
Barras de navegação com arredondamento suave
Listas de cards com border-radius consistente
Notificações toast com cantos arredondados

Formas decorativas e orgânicas

Valores complexos de border-radius criam formas orgânicas únicas e blobs para design web criativo.

Exemplos:

Secções hero com fundos blob
Elementos decorativos com arredondamento assimétrico
Formas orgânicas para branding e identidade
Elementos flutuantes com formas onduladas
Fundos abstratos com border-radius variado
Secções artísticas com formas não padrão

FAQ

Qual é a diferença entre px e % no border-radius?

Os píxeis (px) dão um arredondamento de tamanho fixo independente das dimensões do elemento. A percentagem (%) é calculada a partir do tamanho do elemento — 50% cria um círculo se o elemento for quadrado.

Como criar um círculo perfeito com border-radius?

Use border-radius: 50% num elemento quadrado (largura e altura iguais). Exemplo: width: 100px; height: 100px; border-radius: 50%;

Posso definir valores diferentes para cada canto?

Sim, border-radius suporta até 4 valores: border-radius: 10px 20px 30px 40px; (superior-esq, superior-dir, inferior-dir, inferior-esq no sentido horário).

Que navegadores suportam border-radius?

Todos os navegadores modernos suportam border-radius completamente sem prefixos desde 2011: Chrome, Firefox, Safari, Edge, Opera.

O border-radius afeta o desempenho?

O border-radius não tem praticamente nenhum impacto no desempenho nos navegadores modernos. A renderização é acelerada por GPU.

Como criar um botão em forma de pílula?

Use um valor grande de border-radius (ex. 100px ou 999px) num retângulo. O navegador limitará automaticamente o arredondamento ao máximo possível.

Gerador CSS Border Radius — Editor Visual para Cantos Arredondados

Gerador gratuito de CSS border-radius com editor visual intuitivo para criar cantos arredondados, formas circulares, blobs orgânicos e curvas complexas. Pré-visualização em tempo real, suporte para todas as unidades CSS (px, %, em, rem), biblioteca de presets e cópia do código CSS num clique.

CSS Border-Radius no design web moderno

O editor visual de border-radius simplifica a criação de cantos arredondados para qualquer elemento web sem escrever código CSS manualmente. O gerador suporta dois modos: edição sincronizada de todos os quatro cantos para formas simétricas e controlos individuais por canto para formas orgânicas assimétricas.

O suporte para todas as unidades CSS torna o gerador versátil. Píxeis (px) proporcionam arredondamento fixo. Percentagem (%) cria arredondamento responsivo — 50% num quadrado produz um círculo perfeito.

Cantos arredondados para componentes UI

Botões com border-radius são um elemento fundamental do design web moderno. A pesquisa UX mostra que botões com arredondamento suave (4-8px) são percebidos como mais amigáveis e clicáveis.

Cards de conteúdo com cantos arredondados criam hierarquia visual e agrupamento de informação nas interfaces web. O border-radius ótimo para cards é 8-16px.

Formas circulares e botões pílula

Criar um círculo perfeito com border-radius: 50% só funciona em elementos quadrados. Botões em forma de pílula criam-se com um valor grande de border-radius num retângulo.

Formas orgânicas e blobs

Valores assimétricos de border-radius criam formas orgânicas únicas. Combinar valores diferentes por canto gera formas blob com curvas irregulares suaves. Usar percentagens produz resultados mais dramáticos que os píxeis.

Aspetos técnicos

A sintaxe de border-radius suporta um a quatro valores. O suporte dos navegadores é universal desde 2011 sem prefixos vendor.

Desempenho e animação

O impacto no desempenho é mínimo. Os cantos arredondados são renderizados via GPU. Animar border-radius via transições CSS funciona sem problemas.

Funcionalidades principais

✓ Dois modos — todos os cantos ou cada um individualmente
✓ Pré-visualização em tempo real
✓ Todas as unidades — px, %, em, rem
✓ Controlos deslizantes 0-200
✓ Seletor de cor
✓ 16 presets em 4 categorias
✓ Copiar CSS com um clique
✓ Sem registo — funcionalidade completa gratuita

Crie cantos arredondados profissionais, formas circulares e orgânicas para websites e aplicações modernas com o nosso editor visual online.

Calculadoras relacionadas

Gerador de Paletas de Cores

Esquemas de cores harmoniosos para design, sites e branding

Abrir →

Gerador CSS Box Shadow

Editor visual de sombras com múltiplas camadas e exportação de código CSS

Abrir →

Gerador de Gradientes CSS

Editor visual de gradientes lineares, radiais e conicos com exportacao de codigo CSS

Abrir →

Gerador CSS Flexbox

Editor visual para criar layouts CSS flexíveis com pré-visualização ao vivo e geração de código

Abrir →

Aviso legal: todos os cálculos neste site são aproximados e fornecidos para fins informativos. Os resultados podem diferir dos reais dependendo das condições individuais, especificações técnicas, região, mudanças legislativas, etc.

Calculadoras financeiras, médicas, de construção, de serviços públicos, automotivas, matemáticas, educacionais e de TI não constituem aconselhamento profissional e não podem ser a única base para tomar decisões importantes. Para cálculos precisos e conselhos, recomendamos consultar profissionais especializados.

A administração do site não assume responsabilidade por possíveis erros ou danos relacionados ao uso dos resultados dos cálculos.