Xerador de border-radius

Axusta o redondeo de cada esquina e copia o código border-radius. Activa o modo avanzado para dar a cada esquina un raio horizontal e outro vertical distintos e crear formas orgánicas (blobs).

Como funciona border-radius

border-radius acepta de un a catro valores, que se aplican no sentido das agullas do reloxo comezando por arriba á esquerda: 10px redondea todas as esquinas igual; 10px 20px, a superior esquerda e a inferior dereita con 10px e as outras dúas con 20px; e 10px 20px 30px 40px, cada unha por separado. Tamén existen as propiedades individuais, como border-top-left-radius.

Cunha barra indícanse raios distintos en horizontal e en vertical, o que converte cada esquina nun cuarto de elipse: 50% / 60% 60% 40% 40% debuxa un ovo. Así se crean as formas orgánicas ou «blobs» tan usadas no deseño web actual.

Círculos e pílulas

Para un círculo usa border-radius: 50% nunha caixa cadrada (se non o é, sairá unha elipse). Para unha pílula ou un botón cos extremos redondos, usa un valor en píxeles maior ca metade da altura, como 999px: o navegador limítao automaticamente e a forma non se deforma ao cambiar o largo.

As esquinas redondeadas tamén recortan o fondo e as sombras, pero non o contido que sae da caixa: para recortar unha imaxe, engade overflow: hidden.