Gerador de raio de borda
Gere valores CSS de raio de borda visualmente com nosso gerador gratuito de raio de borda. Arraste 8 alças de canto independentes para criar círculos, pílulas, bolhas e formas arredondadas personalizadas - obtenha abreviações CSS e saídas longas prontas para cópia instantaneamente. Todo o processamento é executado localmente no seu navegador. Não é necessária inscrição.
Drag the 8 sliders to set independent horizontal and vertical radii for each corner. Use presets for common shapes or link all corners to edit them together. The CSS output updates in real time - copy the shorthand or longhand CSS with one click.
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
border-top-left-radius: 30% 30%; border-top-right-radius: 70% 30%; border-bottom-right-radius: 30% 70%; border-bottom-left-radius: 70% 70%;
.element {
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
}--radius-tl: 30% 30%; --radius-tr: 70% 30%; --radius-br: 30% 70%; --radius-bl: 70% 70%;
Por que usar nosso gerador de raio de borda?
- Geração instantânea de raio de borda CSS: gere valores de raio de borda CSS visualmente e obtenha saída CSS pronta para cópia em tempo real. Nosso gerador de raio de borda atualiza a visualização e o CSS a cada movimento do controle deslizante - não é necessário pressionar nenhum botão nem se inscrever.
- Secure Border Radius Generator Online: toda a geração de CSS acontece localmente em seu navegador usando JavaScript. Suas configurações de design nunca saem do seu dispositivo, garantindo 100% de privacidade quando você usa nosso gerador de raio de borda online.
- Gerador de raio de borda on-line - sem instalação: Use nosso gerador de raio de borda diretamente em seu navegador, sem necessidade de downloads, plug-ins ou Node.js. Gere valores CSS de raio de borda a partir de qualquer dispositivo, a qualquer momento.
- Controle de 8 pontos e 10 predefinições de forma: defina raios horizontais e verticais independentes para todos os 4 cantos (8 valores no total) para criar círculos, pílulas, bolhas, folhas e formas orgânicas. Escolha entre 10 predefinições integradas ou vincule todos os cantos para editá-los juntos. Produz formatos de variáveis abreviadas, longas e CSS.
Casos de uso comuns para gerador de raio de borda
- Design de componentes de UI: Os desenvolvedores de front-end usam nosso gerador de raio de borda para projetar cantos arredondados para botões, cartões, modais e campos de entrada. Arraste as alças para encontrar o raio perfeito e copie o CSS diretamente em sua folha de estilo.
- Tokens de sistema de design: Os engenheiros de sistema de design usam nosso gerador de raio de borda para definir tokens de raio de borda consistentes. A saída da variável CSS é mapeada diretamente para arquivos de token de design para Tailwind, tokens Figma e dicionário de estilo.
- Criação de bolhas e formas orgânicas: os designers usam nosso gerador de raio de borda para criar formas de bolhas orgânicas para seções de heróis, avatares e elementos decorativos. A interface de 8 pontos permite formas totalmente assimétricas que seriam impossíveis de calcular manualmente.
- Ícones de aplicativos e molduras de avatar: os desenvolvedores móveis usam nosso gerador de raio de borda para criar a forma de esquilo usada para ícones de aplicativos iOS e ícones adaptativos Android. A predefinição Squircle (30%) produz instantaneamente o formato quadrado arredondado correto.
- Elementos visuais da página de destino: os designers de marketing usam nosso gerador de raio de borda para criar CTAs em forma de pílula, molduras de imagem arredondadas e formas decorativas para páginas de destino. As predefinições Pill e Blob são especialmente populares para landing pages SaaS modernas.
- Aprendendo CSS Border Radius: Os desenvolvedores que aprendem CSS usam nosso gerador de raio de borda para entender como funciona a sintaxe border-radius de 8 valores. A visualização ao vivo deixa imediatamente claro como cada valor de raio horizontal e vertical afeta a forma.
Compreendendo o raio da borda CSS
- Como funciona nosso gerador de raio de borda: Clique em qualquer uma das 10 predefinições de forma (Afiado, Arredondado, Cartão, Círculo, Pílula, Esquilo, Gota, Folha, Ovo, Diamante) para aplicar instantaneamente uma forma inicial. Ou comece com a forma assimétrica padrão e ajuste os controles deslizantes manualmente.
- Arraste as 8 alças de canto: cada canto possui dois controles deslizantes - raio horizontal (X) e vertical (Y). Arraste os controles deslizantes ou digite os valores diretamente. Alterne "Vincular todos os cantos" para editar todos os 8 valores simultaneamente. Alterne entre unidades px e% a qualquer momento.
- Copie o CSS gerado: O gerador de raio de borda gera quatro formatos CSS em tempo real: abreviado (raio da borda), longo (propriedades de canto individuais), regra CSS completa com seletor e declarações de variáveis CSS. Clique em qualquer botão Copiar para copiar o formato necessário.
- Formatos de saída CSS border-radius: quando todos os cantos são iguais, gera border-radius: 16px. Quando os cantos diferem, mas X = Y, gera o formato de 4 valores. Quando X≠Y, gera o formato completo de 8 valores com uma barra separadora.
Perguntas frequentes
Um gerador de raio de borda é uma ferramenta visual que permite definir valores de raio de borda CSS arrastando alças em uma forma de visualização e gera o CSS pronto para cópia. Nosso gerador de raio de borda suporta todos os 8 valores de canto individuais (x superior esquerdo, y superior esquerdo, etc.) para formas totalmente assimétricas - sem necessidade de inscrição.
O gerador de raio da borda gera a abreviatura border-radius quando todos os cantos são iguais ou a sintaxe completa de 8 valores (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) quando os cantos diferem. Ele também gera declarações de variáveis CSS para fluxos de trabalho de token de design.
A sintaxe de 4 valores (por exemplo, 20px 40px 20px 40px) define o mesmo raio horizontal e vertical para cada canto. A sintaxe de 8 valores (por exemplo, 20px 40px 20px 40px / 10px 20px 10px 20px) define raios horizontais e verticais independentes para cada canto, permitindo formas de blob elípticas e orgânicas.
Sim. Toda a geração de CSS acontece localmente no seu navegador usando JavaScript. Nenhum dado é enviado para nenhum servidor, garantindo total privacidade para o seu trabalho de design.
Sim! Nosso gerador de raio de fronteira é 100% gratuito, sem inscrição, conta e sem limites de uso. Gere valores CSS de raio de borda para qualquer projeto diretamente em seu navegador.
Sim. Ao definir raios horizontais e verticais diferentes para cada canto usando a interface de alça de 8 pontos, você pode criar formas orgânicas de bolhas, formas de pílulas, formas de folhas e outras formas arredondadas assimétricas. O gerador de raio de borda gera a sintaxe CSS completa de 8 valores para essas formas.
O gerador de raio de borda inclui predefinições para formas comuns: Círculo (50%), Pílula (9999px), Arredondado (8px), Cartão (16px), Esquilo (30%), Blob (forma orgânica assimétrica), Folha (assimétrica) e Sharp (0px). Clique em qualquer predefinição para aplicá-la instantaneamente e ver a saída CSS.
Sim. O gerador de raio de borda mostra o CSS gerado em um bloco de código com um botão de cópia de um clique. Você também pode copiar valores de propriedades individuais ou a regra CSS completa, incluindo o seletor.
Sim. Você pode alternar entre unidades px e% no gerador de raio da borda. Os valores percentuais são relativos às dimensões do elemento - 50% cria um círculo para elementos quadrados e uma elipse para elementos retangulares.