Gerador de border-radius CSS com pré-visualização
Arredonda cantos visualmente e copia o CSS. Controlo por canto, raios elípticos, px ou %, predefinições de pílula a blob, com pré-visualização ao vivo.
A carregar Gerador de border-radius CSS com pré-visualização… Se nada acontecer, ativa o JavaScript.
A propriedade CSS border-radius arredonda os cantos de um elemento e é uma das poucas propriedades que muda o carácter de toda uma interface. Os botões ficam mais simpáticos com 8 píxeis de arredondamento, os cartões parecem modernos entre 12 e 16, os avatares tornam-se círculos a 50 por cento, e as etiquetas transformam-se em pílulas quando o raio passa metade da altura. Este gerador permite acertar esses valores com deslizadores e campos numéricos enquanto vês o resultado de imediato, e depois copiar uma única linha de CSS para colar na tua folha de estilos. Sem registo, sem passo de exportação e sem nada a sair do teu navegador.
Perguntas frequentes
Como faço um círculo com border-radius?
O que é a barra num valor de border-radius?
Devo usar píxeis ou percentagens?
Em que ordem se aplicam os quatro valores?
Porque é que o meu raio parece menor do que o valor que defini?
O border-radius corta o conteúdo dentro do elemento?
O CSS é compatível com navegadores antigos?
Posso usar isto em imagens e botões?
É enviado algo para um servidor?
Sobre Gerador de border-radius CSS com pré-visualização
O border-radius é mais capaz do que a maioria das pessoas aproveita. Cada um dos quatro cantos pode ser definido de forma independente, e é assim que se obtêm formas de folha, balões de fala, bilhetes picados e cartões assimétricos. Cada canto pode também ser elíptico em vez de circular, o que significa que aceita um raio horizontal e um raio vertical, escritos com uma barra: border-radius: 60px 20px 60px 20px / 30px 60px 30px 60px. É essa sintaxe com barra que o interruptor "Cantos elípticos" produz aqui, e é o truque por trás das formas orgânicas que aparecem nas páginas de destino modernas. A predefinição "Blob" gera um conjunto aleatório de oito valores para poderes ir mudando até encontrar algo que funcione.
A escolha entre píxeis e percentagens importa mais do que parece à primeira vista. Um raio em píxeis é absoluto: 20px continuam 20px, quer o elemento seja um pequeno selo quer um painel largo. Um raio em percentagem é relativo às dimensões do próprio elemento, horizontalmente à largura e verticalmente à altura, por isso 50% produz sempre uma elipse perfeita e uma forma definida em percentagens mantém as proporções quando o elemento é redimensionado. É por isso que os avatares costumam usar 50% e os botões um valor fixo em píxeis. Usa o alternador de unidade para ver a diferença: redimensiona a caixa de pré-visualização com os deslizadores de largura e altura e observa como uma forma em percentagem se adapta enquanto uma em píxeis não.
Tudo é desenhado no teu navegador com o mesmo motor CSS que vai desenhar o teu site, por isso a pré-visualização não é uma aproximação, é a coisa real. Usa o fundo em xadrez para avaliar as formas contra transparência, liga o fundo de imagem para ver como uma fotografia é cortada pelos cantos, e copia o CSS quando estiver como queres. Se introduzires um raio maior do que o elemento consegue acomodar, os navegadores reduzem todos os raios proporcionalmente em vez de os sobrepor, e é por isso que um valor em píxeis muito grande numa caixa baixa produz uma pílula limpa em vez de uma forma quebrada.
A longa batalha dos cantos arredondados
Os cantos arredondados foram uma obsessão do design muito antes de o CSS os conseguir produzir. Em 1981, enquanto construía o primeiro Macintosh, Bill Atkinson escreveu rotinas rápidas para desenhar círculos e elipses, mas resistia a acrescentar retângulos arredondados porque a matemática lhe parecia demasiado lenta. Steve Jobs levou-o a dar uma volta ao quarteirão a apontar retângulos arredondados em sinais de trânsito e janelas de automóveis até Atkinson ceder; as rotinas RoundRects resultantes moldaram o aspeto da interface do Mac e, por extensão, da computação gráfica.
Na web, a espera foi longa. Ao longo do início dos anos 2000, uma caixa arredondada significava fatiar um design em imagens de canto no Photoshop e voltar a costurá-las com divs encaixadas, uma abordagem tão comum que tinha nome: a técnica das portas deslizantes. Alguns desenvolvedores geravam cantos com tabelas, outros com bibliotecas JavaScript que os desenhavam em tempo de execução. O border-radius foi proposto para o CSS3 e chegou primeiro atrás de prefixos de fabricante, como -moz-border-radius no Firefox em 2005 e depois -webkit-border-radius no Safari, pelo que as folhas de estilo reais transportaram três cópias de cada declaração de canto durante anos. O Internet Explorer só o suportou na versão 9, lançada em 2011, e foi aí que a maior parte das equipas finalmente apagou as suas imagens de canto.
A discussão visual nunca terminou realmente, apenas mudou de sítio. As próprias formas dos ícones da Apple passaram de cantos circulares simples para um squircle, uma superelipse cuja curvatura muda de forma contínua em vez de saltar da aresta reta para o arco, porque a junção parece mais suave ao olho. Os designers perseguem esse efeito em CSS desde então, com raios elípticos, caminhos SVG e agora a propriedade experimental corner-shape. Entretanto o pêndulo do gosto continua a oscilar: a era do design plano, em meados da década de 2010, cortou os raios até quase nada, e a preferência atual por interfaces suaves e simpáticas voltou a aumentá-los. A propriedade é uma única linha de CSS, mas o número que se lhe põe tem sido discutido há quarenta anos.