Gerador de raio de borda
Crie propriedades CSS border-radius
Entrada e opções
Predefinições rápidas e exemplos
Roda no seu navegador. Os dados informados ficam neste dispositivo.
Resultados
Informe seus valores para ver o resultado.
Sobre o Gerador de raio de borda
Nosso gerador de border radius em CSS gratuito dá controle visual completo sobre os cantos arredondados de qualquer elemento HTML. Ajuste cada canto de forma independente ou vincule todos, escolha entre várias unidades (px, %, em, rem) e veja o resultado na hora no painel de visualização ao vivo.
Cantos arredondados são parte fundamental do design web moderno. De arredondamentos sutis de 4px em cards e campos a círculos completos de 50% em avatares, a propriedade border-radius define como os usuários percebem a sua interface. Esta ferramenta facilita encontrar os valores exatos de que você precisa, sem tentativa e erro nem atualizações constantes do navegador.
O gerador inclui 10 formas predefinidas, como Quadrado, Círculo, Pílula, Gota e Orgânico, além de um gerador aleatório para explorar ideias. A saída vem em vários formatos, incluindo atalho CSS, propriedades individuais de cada canto, uma classe CSS pronta para uso e um equivalente aproximado em Tailwind CSS.
Principais recursos
- Controle independente de cada canto: superior esquerdo, superior direito, inferior direito e inferior esquerdo
- Opção de vincular os cantos para ajustar o raio de forma uniforme nos quatro cantos
- Quatro opções de unidade: pixels (px), porcentagem (%), em e rem para designs responsivos
- Visualização em tempo real com tamanho do elemento ajustável (100-300px) e seletor de cor personalizada
- 10 formas predefinidas: Quadrado, Arredondado, Círculo, Pílula, Topo arredondado, Base arredondada, Esquerda arredondada, Direita arredondada, Gota e Orgânico
- Indicadores visuais com o valor exato do raio em cada canto
- Gerador de raio aleatório para inspiração e experimentação
- Vários formatos de saída CSS: atalho, propriedades individuais, classe CSS e aproximação em Tailwind CSS
- Copie para a área de transferência com um clique e use direto nos seus projetos
- Controles deslizantes com exibição da faixa para ajustar os valores de forma intuitiva
Como usar o Gerador de raio de borda
- Selecione a unidade: Escolha px para tamanhos fixos, % para escala responsiva ou em/rem para dimensionamento baseado na tipografia.
- Ajuste os valores dos cantos: Use os controles deslizantes para definir o raio de cada canto individualmente ou ative "Vincular todos os cantos" para um arredondamento uniforme.
- Experimente as formas predefinidas: Clique em qualquer uma das 10 formas, como Círculo, Pílula ou Gota, para aplicar na hora configurações comuns.
- Visualize o resultado: Veja a visualização ao vivo, com tamanho e cor ajustáveis, para saber exatamente como ficará o seu border radius.
- Copie o CSS: Clique em Copiar para pegar o código CSS do border-radius ou use a seção de formatos alternativos para as propriedades individuais ou classes do Tailwind.
Casos de uso
- Estilo de botões: Crie botões em formato de pílula, botões de chamada para ação com arredondamento sutil ou botões de ícone totalmente circulares.
- Componentes de card: Aplique cantos arredondados consistentes em cards, modais e caixas de diálogo no seu design system.
- Imagens de avatar: Use border-radius de 50% em imagens quadradas para criar avatares e fotos de perfil perfeitamente circulares.
- Campos de entrada: Adicione um arredondamento suave a campos de formulário, áreas de texto e listas suspensas para um visual moderno.
- Elementos de navegação: Estilize abas, selos, tags e itens de navegação com o arredondamento de cantos adequado.
- Formas criativas: Combine valores assimétricos nos cantos para criar manchas orgânicas, gotas e elementos decorativos únicos.
- Design de tooltips e popovers: Aplique um arredondamento preciso em tooltips, popovers e menus suspensos.
- Tokens de design responsivos: Defina valores de border-radius consistentes em todo o projeto usando as unidades em ou rem.
Perguntas frequentes
Esta ferramenta é gratuita?
Sim, o Gerador de raio de borda é totalmente gratuito e sem restrições. Você pode usá-lo quantas vezes quiser, sem cadastro nem pagamento.
Meus dados estão seguros?
Com certeza. A ferramenta funciona inteiramente no seu navegador. Nenhum dado é transmitido a servidores, então as suas configurações e o código CSS gerado permanecem privados no seu dispositivo.
Qual é a diferença entre px e % no border-radius?
Valores em pixels (px) criam um raio fixo, independentemente do tamanho do elemento. Valores em porcentagem (%) são relativos às dimensões do elemento, o que os torna responsivos. Por exemplo, 50% em um elemento quadrado cria um círculo perfeito.
Como fazer um círculo perfeito com CSS?
Defina border-radius como 50% em um elemento com largura e altura iguais. A forma Círculo desta ferramenta aplica exatamente essa configuração.
O border-radius é compatível com todos os navegadores?
Sim, a propriedade CSS border-radius tem suporte total em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. Não são necessários prefixos de fabricante.
Dicas e boas práticas
- Use valores consistentes: Defina 2 a 3 valores padrão de border-radius no seu design system (por exemplo, 4px, 8px, 16px) para manter a consistência visual.
- Use porcentagens para círculos: Defina 50% em elementos quadrados para obter círculos perfeitos que se ajustam automaticamente às mudanças de tamanho.
- Seja sutil em formulários: Valores pequenos (2-8px) funcionam melhor em campos de entrada e elementos de formulário, mantendo um visual limpo e profissional.
- Teste cantos assimétricos: Valores diferentes em cada canto criam formas únicas que podem dar personalidade a elementos decorativos.
- Considere unidades responsivas: Use em ou rem para valores de border-radius que escalam proporcionalmente à sua tipografia.
- Teste com conteúdo: Sempre veja como os cantos arredondados ficam com o conteúdo real dentro do elemento, principalmente em diferentes tamanhos de viewport.