CSS: redondear esquinas

Muy fácil, código css para redondear los bordes de algún elemento en CSS usando la propiedad border-radius. Muy útil si quieres redondear por ejemplo un div, botón, un input-text, una foto…

La sintaxis general de border-radius es:

border-radius: [tamaño|%];

El tamaño se peude indicar las 4 esquinas a la vez (por ejemplo un tamaño de 20px de profundidad):

border-radius: 20px;

O individualmente:

border-top-left-radius: 20px; // esquina superior izquierda
border-top-right-radius: 20px; // esquina superior derecha
border-bottom-left-radius: 20px; // esquina inferior izquierda
border-top-right-radius: 20px; // esquina inferior derecha

Si quieres usar diferentes tamaños para cada esquina de forma más cómoda:

border-radius: 20px 15px 5px 30px; // arriba-izq arriba-der abajo-der abajo-izq

Ejemplos: