Gerador de Border Radius

Dê forma aos cantos com mais controlo

O raio da borda é uma das formas mais rápidas de mudar a personalidade de uma interface. Valores pequenos transmitem precisão e estrutura, valores médios tornam cartões e botões mais simpáticos, e valores grandes permitem criar pílulas, formas orgânicas ou painéis de ilustração divertidos. Este gerador de border radius expõe toda a sintaxe CSS para que possa criar tanto retângulos arredondados comuns como cantos elípticos, sem escrever à mão a notação com barra.

Cada canto tem um raio horizontal e um raio vertical. Quando os valores são iguais, o canto é circular e o CSS parece-se com a conhecida declaração border-radius de quatro valores. Quando X e Y diferem, o canto torna-se elíptico e o CSS escreve primeiro os valores horizontais, depois uma barra e por fim os valores verticais. A pré-visualização em tempo real torna essa relação evidente, porque a forma muda imediatamente à medida que move cada controlo.

Quando os raios elípticos são úteis

Os cantos elípticos são úteis quando quer algo mais orgânico do que um cartão simples, mas continua a precisar de um CSS leve e responsivo. Podem tornar avatares, destaques, formas de cupão, máscaras de imagem e painéis decorativos menos genéricos. Os cantos assimétricos também ajudam a criar uma direção visual, atraindo a atenção para um título ou uma chamada para ação. Use o preset blob como ponto de partida e depois reduza os valores mais fortes se a forma começar a distrair do conteúdo.

Usar valores de raio de forma consistente

Em sistemas de design de produção, mantenha um pequeno conjunto de raios padrão para os componentes do dia a dia e use valores personalizados apenas quando a forma tiver um propósito claro. Um botão, um campo de entrada e um cartão costumam parecer mais coerentes quando partilham tamanhos de canto relacionados. As secções decorativas podem ser mais expressivas, mas devem continuar a responder bem a larguras diferentes. Depois de copiar o CSS gerado, teste-o no tamanho real do elemento, porque um raio que parece equilibrado no cartão de pré-visualização pode ser demasiado forte num emblema compacto ou demasiado subtil num painel hero largo.