Gerador de border-radius

Ajuste o arredondamento de cada canto e copie o código border-radius. Ative o modo avançado para dar a cada canto um raio horizontal e outro vertical diferentes e criar formas orgânicas (blobs).

Como funciona o border-radius

O border-radius aceita de um a quatro valores, aplicados no sentido dos ponteiros do relógio a começar em cima à esquerda: 10px arredonda todos os cantos por igual; 10px 20px, o canto superior esquerdo e o inferior direito com 10px e os outros dois com 20px; e 10px 20px 30px 40px, cada um em separado. Existem também as propriedades individuais, como border-top-left-radius.

Com uma barra indicam-se raios diferentes na horizontal e na vertical, o que transforma cada canto num quarto de elipse: 50% / 60% 60% 40% 40% desenha um ovo. É assim que se criam as formas orgânicas ou «blobs» tão usadas no web design atual.

Círculos e pílulas

Para um círculo use border-radius: 50% numa caixa quadrada (se não for quadrada, sai uma elipse). Para uma pílula ou um botão com as pontas redondas, use um valor em píxeis maior do que metade da altura, como 999px: o navegador limita-o automaticamente e a forma não se deforma quando a largura muda.

Os cantos arredondados também recortam o fundo e as sombras, mas não o conteúdo que sai da caixa: para recortar uma imagem, acrescente overflow: hidden.