UsefulVerse
Idioma · Português (Brasil)

Uso gratuito, sem necessidade de conta

CSS Gerador de raio de borda

Molda cada canto de forma independente, incluindo raios elípticos horizontais e verticais. Visualize o resultado e copie o CSS compacto.

Digite 0–2,000 px ou 0–100%. São fornecidos controles numéricos acessíveis por teclado.

Canto superior esquerdo
Canto superior direito
Canto inferior direito
Parte inferior esquerda

CSS dimensiona automaticamente os raios dos cantos proporcionalmente quando suas somas excedem a largura ou altura do elemento. A visualização segue o comportamento CSS do navegador.

Visualização ao vivo

Ajuste um canto para visualizar sua forma.

CSS

Como gerar valores CSS border-radius?

Escolha pixels ou porcentagens, ajuste o raio horizontal e vertical para cada canto e copie a declaração border-radius gerada. CSS pode normalizar proporcionalmente raios sobrepostos para ajustar o elemento.

Perguntas frequentes

Como gerar valores CSS border-radius?

Escolha pixels ou porcentagens, ajuste o raio horizontal e vertical para cada canto e copie a declaração border-radius gerada. CSS pode normalizar proporcionalmente raios sobrepostos para ajustar o elemento.

Meu CSS ou design foi carregado?

Não. A visualização e CSS são gerados nesta aba do navegador. Não há upload, conta, chamada de API ou salvamento automático.

Cada canto pode ter um raio diferente?

Sim. Defina um valor horizontal e vertical separado para os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo.

O que significa a barra em border-radius?

Separa raios horizontais de raios verticais, criando cantos elípticos. Se cada canto usar o mesmo valor horizontal e vertical, o gerador omitirá a barra.

Por que a visualização pode parecer menor que os valores?

CSS normaliza proporcionalmente os raios que se sobreporiam em uma aresta. Esse é o comportamento padrão do navegador e também é aplicado nesta visualização.