O que são os 8 valores?

Cada um dos 4 cantos tem um raio horizontal e um vertical, totalizando 8 valores. Formato: border-radius: A B C D / E F G H.

Para que servem as formas blob?

Decoração de fundo em seções hero, máscaras para fotos de perfil, formas únicas para botões CTA e mais.

Os dados são enviados a algum servidor?

Não. Tudo é gerado localmente no seu navegador.

border-radius funciona desde o IE9. A notação elíptica (com "/") também funciona desde o IE9+.

Posso usá-lo com Sass ou Less?

Sim. O código gerado é uma propriedade CSS padrão, então funciona diretamente com Sass, Less e Stylus.

⬜

border-radius,

Gerador de Border Radius CSS

Controle os 8 valores de border-radius visualmente.
Crie formas blob com pré-visualização em tempo real.

🎛️

Controle de 8 Valores

4 cantos × raio horizontal/vertical

🫧

Formas Blob

Crie formas orgânicas facilmente

📋

Cópia Instantânea

Copie o CSS gerado com um clique

Pré-visualização

Fundo Tamanho px

Predefinições

Horizontal

Sup. Esq.50%

Sup. Dir.50%

Inf. Dir.50%

Inf. Esq.50%

Vertical

Sup. Esq.50%

Sup. Dir.50%

Inf. Dir.50%

Inf. Esq.50%

Código Gerado

about,

Sobre

O Gerador de Border Radius CSS permite controlar visualmente os 8 valores de border-radius (raio horizontal e vertical de cada um dos 4 cantos) e ver o resultado em tempo real.

Além dos cantos arredondados habituais, você pode criar formas blob complexas, muito populares para decorações de seções hero. Todo o processamento é feito localmente no seu navegador.

how to,

Como Usar

PASSO 1

Escolha uma predefinição

Comece com uma predefinição (Círculo, Folha, Blob, etc.) para obter rapidamente uma forma base e depois ajuste com os controles deslizantes.

PASSO 2

Ajuste os controles deslizantes

Arraste os controles deslizantes horizontais e verticais de cada canto. A pré-visualização é atualizada instantaneamente.

PASSO 3

Copie o CSS

Clique em "Copiar" para levar o código gerado à área de transferência e colá-lo na sua folha de estilos.

glossary,

Glossário

border-radius: Propriedade CSS que arredonda os cantos de um elemento. Aceita unidades px e % com valores independentes por canto.
Raio horizontal / vertical: Os dois raios da elipse definida por border-radius. O separador "/" divide os valores horizontais (antes) dos verticais (depois).
Blob: Forma orgânica e irregular criada ao definir valores assimétricos nos 8 eixos de border-radius.
clip-path: Propriedade CSS para recortar elementos com formas personalizadas. Mais flexível que border-radius, mas com sintaxe mais complexa.
Shorthand: border-radius: 10px 20px 30px 40px — especifica os 4 cantos em uma única declaração. Use "/" para separar horizontal e vertical.

faq,

FAQ

Q.O que são os 8 valores?: Cada um dos 4 cantos tem um raio horizontal e um vertical, totalizando 8 valores. Formato: border-radius: A B C D / E F G H.
Q.Para que servem as formas blob?: Decoração de fundo em seções hero, máscaras para fotos de perfil, formas únicas para botões CTA e mais.
Q.Os dados são enviados a algum servidor?: Não. Tudo é gerado localmente no seu navegador.
Q.Funciona no IE11?: border-radius funciona desde o IE9. A notação elíptica (com "/") também funciona desde o IE9+.
Q.Posso usá-lo com Sass ou Less?: Sim. O código gerado é uma propriedade CSS padrão, então funciona diretamente com Sass, Less e Stylus.