Funcionamento da propriedade CSS border-radius
A propriedade border-radius no CSS define o arredondamento dos cantos de um elemento. O Gerador de Border Radius permite ajustar este arredondamento de forma visual, controlando cada canto individualmente ou de forma associada, com suporte para unidades em píxeis ou percentagem. O valor inicial do controlo deslizante está definido em 24, o que resulta no código border-radius: 24px;.
Os quatro controlos deslizantes de cantos mapeiam, no sentido dos ponteiros do relógio, os seguintes cantos do elemento:
- Superior esquerdo
- Superior direito
- Inferior direito
- Inferior esquerdo
Quando a opção "Associar todos os cantos" está ativada, um único controlo deslizante rotulado como "Todos os cantos" ajusta simultaneamente os quatro cantos. Quando desativada, o utilizador dispõe de quatro controlos deslizantes individuais: "Superior esquerdo", "Superior direito", "Inferior direito" e "Inferior esquerdo".
Diferença entre píxeis e percentagem
A escolha da unidade altera a forma como o navegador calcula o arredondamento dos cantos:
- Píxeis (px): Em píxeis, o canto é arredondado num valor fixo, independentemente do tamanho do elemento.
- Percentagem (%): Em percentagem, o canto é arredondado em relação às dimensões da própria caixa. Uma percentagem horizontal segue a largura do elemento, enquanto uma percentagem vertical segue a altura do mesmo. Definir todos os cantos para 50% numa caixa quadrada transforma-a num círculo perfeito.
Esta distinção é fundamental para o design responsivo, onde os elementos mudam de tamanho mas devem manter a proporção do seu arredondamento.
Modo elíptico e formas avançadas
O gerador disponibiliza a opção "Cantos elípticos" para criar formas mais complexas e orgânicas.
Quando o modo elíptico está desativado, cada canto é desenhado como um quarto de círculo perfeito com um único raio. Ao ativar a opção "Cantos elípticos", cada canto passa a ter dois controlos deslizantes separados: "Horizontal" e "Vertical". Isto permite definir um raio horizontal e um raio vertical distintos para cada um dos cantos.
No código CSS gerado, esta distinção reflete-se na sintaxe. O gerador escreve a sintaxe com barra de dois valores (por exemplo, border-radius: 10px / 20px;) quando o modo elíptico está ativo. O primeiro grupo de valores define os raios horizontais e o segundo grupo, após a barra, define os raios verticais. O gerador regressa automaticamente à forma curta de valor único assim que os cantos voltarem a ser redondos (raios horizontais e verticais idênticos).
Criação de círculos, pílulas e formas orgânicas
O comportamento geométrico do border-radius permite criar formas comuns de interface através de regras específicas:
- Círculo perfeito: Para criar um círculo a partir de um elemento quadrado, deve associar os cantos, mudar a unidade para percentagem e definir o valor em 50%.
- Botão em forma de pílula: Para desenhar uma pílula, deve manter a unidade em píxeis e arrastar o controlo de um canto para além de metade da altura total do botão. Desta forma, as laterais mantêm-se totalmente arredondadas, mesmo que a largura do botão aumente.
- Formas orgânicas (gotas ou "blobs"): Através do modo elíptico, a combinação de raios horizontais e verticais desiguais em cada canto produz formas suaves e assimétricas.
Utilização de predefinições
O gerador inclui botões de predefinições para aplicar configurações instantâneas ao elemento de visualização:
- Reto
- Arredondado
- Círculo: Configura todos os cantos para 50%.
- Gota
- Folha
O código gerado é exibido na secção "CSS" e pode ser copiado diretamente através do botão "Copiar CSS" para ser aplicado nas folhas de estilo do seu projeto web.
Processamento local e privacidade
O funcionamento deste gerador é executado localmente. Cada canto é desenhado diretamente no seu navegador, o que significa que nenhum dos valores definidos ou dados de utilização são carregados para o BroBroGo.
Perguntas Frequentes
Como funcionam os quatro cantos e a diferença entre px e %?
Os quatro controlos deslizantes mapeiam, no sentido dos ponteiros do relógio, os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo. Em píxeis, o canto é arredondado num valor fixo; em percentagem, é arredondado em relação à caixa — uma percentagem horizontal segue a largura e uma vertical segue a altura, pelo que 50% transforma um quadrado num círculo.
O que faz o modo elíptico?
Quando desativado, cada canto é um quarto de círculo com um único raio. Ao ativá-lo, cada canto recebe um raio horizontal e vertical separado, permitindo criar formas orgânicas de "gota" (blob). O gerador escreve a sintaxe com barra de dois valores por si e regressa à forma curta assim que os cantos voltarem a ser redondos.
Como posso criar um círculo perfeito ou uma pílula?
Associe os cantos, mude para percentagem e defina 50%: um quadrado torna-se um círculo. Para um botão em forma de pílula, mantenha em píxeis e arraste um canto para além de metade da altura do botão — as laterais mantêm-se totalmente arredondadas em qualquer largura. A predefinição Círculo configura o primeiro caso com um único clique.