Funcionamento do CSS border-radius
A propriedade border-radius do CSS define o arredondamento dos cantos da borda de um elemento. O Gerador de Border Radius permite ajustar visualmente esse arredondamento por meio de controles deslizantes, gerando o código CSS correspondente de forma imediata.
O comportamento dos cantos segue uma ordem específica no sentido horário:
- Superior esquerdo
- Superior direito
- Inferior direito
- Inferior esquerdo
Quando a opção "Vincular todos os cantos" está ativada, um único controle deslizante rotulado "Todos os cantos" ajusta simultaneamente os quatro cantos do elemento. Ao desativar essa opção, o usuário ganha controle individual sobre cada extremidade através de quatro controles deslizantes específicos: "Superior esquerdo", "Superior direito", "Inferior direito" e "Inferior esquerdo". Cada controle deslizante opera em uma escala que varia de 0 a 100. O valor inicial do controle deslizante é 24, o que gera o código border-radius: 24px;.
Diferenças entre unidades de pixel e porcentagem
A escolha da unidade de medida altera a forma como o navegador calcula o arredondamento dos cantos em relação ao tamanho do elemento. O seletor de unidade do gerador permite alternar entre "px" (pixels) e "%" (porcentagem).
- Pixels (px): O canto é arredondado por um valor fixo e absoluto. O raio de curvatura permanece idêntico, independentemente de o elemento ser redimensionado ou possuir largura e altura diferentes.
- Porcentagem (%): O arredondamento ocorre de forma relativa às dimensões da caixa. O raio horizontal acompanha a largura total do elemento, enquanto o raio vertical acompanha a altura. Essa característica torna a porcentagem útil para designs responsivos, onde os elementos mudam de tamanho de acordo com a tela. Se todos os cantos de um elemento perfeitamente quadrado forem definidos em 50%, o quadrado se transforma em um círculo.
O modo de cantos elípticos
Por padrão, quando o modo elíptico está desativado, cada canto é tratado como um quarto de círculo perfeito, utilizando um único valor de raio. Ao ativar a opção "Cantos elípticos", o comportamento é alterado para permitir que cada canto possua raios horizontal e vertical independentes.
Nesse modo, cada um dos cantos passa a exibir dois controles deslizantes: "Horizontal" e "Vertical". Isso possibilita a criação de curvas mais suaves e formas orgânicas conhecidas como "gotas" (blobs).
A mudança de modo altera a estrutura do código CSS gerado:
- Modo convencional: O gerador utiliza a sintaxe curta padrão do CSS (por exemplo, com um a quatro valores separados por espaços).
- Modo elíptico: O gerador escreve o código utilizando a sintaxe de barra (/), que separa os valores dos raios horizontais dos valores dos raios verticais. Se o usuário desativar o modo elíptico ou retornar os cantos a valores simétricos, o gerador reverte automaticamente o código para a forma curta.
Criação de círculos perfeitos e botões pílula
O comportamento geométrico do border-radius permite criar formas comuns de interface de maneira simples:
- Círculo perfeito: Para transformar um elemento quadrado em um círculo, ativa-se a opção para vincular todos os cantos, altera-se a unidade para "%" e define-se o valor em 50%.
- Botão em formato de pílula: Para criar botões com as laterais perfeitamente arredondadas e o centro plano, utiliza-se a unidade em pixels ("px"). Ao arrastar o controle de arredondamento para um valor que ultrapasse a metade da altura do botão, as laterais mantêm o formato semicircular completo, mesmo que a largura do botão aumente ou diminua.
Uso de predefinições no design
O gerador disponibiliza botões de predefinições para aplicar configurações instantâneas ao elemento visualizado:
- Reto: Remove todo o arredondamento, definindo os cantos em 0.
- Arredondado: Aplica uma curvatura suave e padrão nos cantos.
- Círculo: Configura automaticamente todos os cantos para 50%.
- Gota: Ativa o modo elíptico e ajusta os raios para criar uma forma orgânica e assimétrica.
- Folha: Ajusta cantos opostos de forma assimétrica para simular o formato de uma folha.
O resultado das alterações é exibido em tempo real em uma área de visualização na tela. Abaixo do cabeçalho "CSS", o código gerado é exibido pronto para ser copiado através do botão "Copiar CSS" e colado diretamente nas folhas de estilo de um projeto web.
Processamento local e privacidade
O funcionamento do Gerador de Border Radius ocorre inteiramente no lado do cliente. Cada canto é desenhado diretamente no seu navegador. Nada do que você define aqui é enviado para o BroBroGo, garantindo que as configurações de design permaneçam restritas ao ambiente local do usuário durante o uso.
Perguntas Frequentes
Como funcionam os quatro cantos e a diferença entre px e %? Os quatro controles deslizantes mapeiam, em sentido horário, os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo. Em pixels, o canto arredonda em um um valor fixo; em porcentagem, ele arredonda em relação à caixa — uma porcentagem horizontal segue a largura e uma vertical segue a altura, de modo que 50% transforma um quadrado em um círculo.
O que faz o modo elíptico? Desativado, cada canto é um quarto de círculo com um único raio. Ative-o e cada canto ganha um raio horizontal e vertical separado, que é como você cria formas orgânicas de "gota" (blob). O gerador escreve a sintaxe com barra de dois valores para você e volta para a forma curta assim que os cantos forem redondos novamente.
Como faço um círculo perfeito ou uma pílula? Vincule os cantos, mude para porcentagem e defina 50%: um quadrado vira um círculo. Para um botão em formato de pílula, mantenha em pixels e arraste um canto além da metade da altura do botão — as laterais continuam totalmente arredondadas em qualquer largura. O preset Círculo configura o primeiro caso com um clique.