As ferramentas de desenvolvimento que você usa todos os dias, tudo em um só lugar.

Conversores, formatadores, hashes, validadores e os pequenos utilitários que você fica reabrindo permanecem juntos em vez de se perderem entre as abas.

GitHub

/ Ferramentas

■

/ Buscador de ferramentas

109 ferramentas

/ Gerador de Border Radius

Unidade

Predefinições

Vincular todos os cantos

Superior esquerdo: 12px

Superior direito: 12px

Inferior esquerdo: 12px

Inferior direito: 12px

Cor da prévia

Tamanho da prévia: 150px

Prévia

Código CSS

Propriedades individuais dos cantos

Classe Tailwind

/ Ferramenta selecionada

■

Gerador de Border Radius - ferramenta de geração gratuita

Gerador visual de border-radius CSS com controle individual de cantos

■ 01

O que é CSS Border Radius?

A propriedade CSS border-radius arredonda os cantos da borda externa de um elemento. Você pode definir os quatro cantos com o mesmo valor ou especificar valores diferentes para cada canto para criar formas únicas.

■ 02

Como funciona?

O border radius pode ser especificado com 1 a 4 valores. Com 1 valor, todos os cantos são iguais. Com 2 valores, o primeiro se aplica ao superior-esquerdo/inferior-direito e o segundo ao superior-direito/inferior-esquerdo. Com 3 valores: superior-esquerdo, superior-…

■ 03

Casos de exemplo

Abrange Todos os cantos iguais, Formato de pílula e Cantos diferentes, para você comparar entradas e saídas comuns rapidamente.

/ Ferramentas relacionadas

/ Código

■

Código-fonte da ferramenta selecionada, mostrado aqui ao lado da versão ao vivo à direita.

/ Código-fonte

TypeScript

typescript

// No external dependencies needed - generates CSS border-radius strings

interface BorderRadius {
  topLeft: number;
  topRight: number;
  bottomRight: number;
  bottomLeft: number;
  unit: 'px' | '%' | 'rem';
}