Como funciona o gerador de border-radius CSS
Este gerador permite criar valores personalizados para a propriedade border-radius em CSS, usando até oito valores diferentes: quatro horizontais e quatro verticais, um para cada canto do elemento. O resultado pode ser um simples canto arredondado ou formas orgânicas tipo blob, dependendo dos valores escolhidos.
Você pode digitar manualmente cada valor ou usar os modos aleatório e 'fancy' para gerar blobs dinâmicos. A ferramenta mostra uma prévia em tempo real do efeito, usando o próprio navegador para renderizar o CSS.
Escolhendo entre pixels e porcentagem
Ao definir os valores, é possível escolher entre unidades em pixels ou porcentagem. Pixels criam cantos fixos e proporcionais ao tamanho do elemento, enquanto porcentagem permite que os cantos e formas acompanhem o redimensionamento, ideal para layouts responsivos.
Se o valor for maior que metade do lado do elemento, o navegador reduz automaticamente, limitando a curvatura. Isso garante que a visualização seja sempre fiel ao comportamento real do CSS nas páginas.
Copie e teste seu border-radius
Depois de ajustar os valores e visualizar o resultado, basta copiar o código CSS gerado com um clique. O código usa a sintaxe completa 'border-radius: h1 h2 h3 h4 / v1 v2 v3 v4', compatível com todos os navegadores modernos.
Use esse código em seus projetos para criar efeitos únicos, animar transições ou destacar elementos sem enviar nada para servidores. Tudo acontece localmente, com privacidade total.
Perguntas frequentes
Como uso a sintaxe de oito valores para border-radius?
Defina quatro valores horizontais e quatro verticais, usando a barra '/'. Isso permite criar formas assimétricas e blobs. Por exemplo: <code>border-radius: 30px 50px 20px 10px / 40px 15px 25px 5px</code>.
Qual a diferença entre pixels e porcentagem no border-radius?
Pixels geram cantos fixos, enquanto porcentagem adapta os cantos ao tamanho do elemento, essencial para layouts responsivos. Escolha porcentagem para formas que mantêm proporção ao redimensionar.
Por que minha forma muda ao redimensionar o elemento?
Valores em porcentagem são relativos ao tamanho do elemento. Ao redimensionar, a curvatura acompanha, criando variações na aparência. Para manter a mesma forma, use pixels.
Posso animar blobs com CSS?
Sim, é possível animar o <code>border-radius</code> entre diferentes valores usando transições ou keyframes no CSS. Para efeitos suaves, mantenha a mesma quantidade de valores em cada estágio.
Como funciona o modo aleatório e fancy?
A ferramenta calcula valores variados para cada canto, criando formas orgânicas. Os algoritmos geram números diferentes a cada clique, sempre dentro dos limites do CSS para garantir compatibilidade.
O CSS gerado funciona em todos os navegadores?
Sim, a sintaxe avançada de <code>border-radius</code> é suportada nos navegadores modernos. A prévia reflete exatamente como será exibido em suas páginas.
Problema ou sugestão para esta ferramenta? Conte para nós