Generador de bordes y radios CSS

De una a cuatro esquinas: cómo se lee el atajo

border-radius admite entre uno y cuatro valores, y el orden es siempre el mismo: empieza en la esquina superior izquierda y gira en el sentido de las agujas del reloj. Con un valor se redondean las cuatro esquinas por igual. Con dos, el primero va a la superior izquierda y la inferior derecha, y el segundo a las otras dos: es el atajo de las formas de hoja. Con tres, el valor del medio se reparte entre la superior derecha y la inferior izquierda. Con cuatro, cada esquina lleva el suyo.

Si escribes un radio mayor que la mitad del lado, el navegador no rompe la caja: reduce proporcionalmente todos los radios hasta que quepan. Por eso border-radius: 999px siempre da una pastilla perfecta sin tener que calcular nada.

La barra que lo cambia todo: radios elípticos

Dentro de border-radius, la barra / separa dos listas: antes van los radios horizontales y después los verticales. Cuando los dos valores de una esquina son distintos, la curva deja de ser un cuarto de círculo y pasa a ser un cuarto de elipse. De ahí salen esas siluetas blandas tipo gota que ves en fondos y avatares:

border-radius: 62% 38% 30% 70% / 55% 30% 70% 45%;

El truco para que la forma quede equilibrada y no se recorte es que los dos radios de un mismo lado sumen 100 %: si la esquina superior izquierda lleva 62 %, la superior derecha lleva 38 %. El botón Forma orgánica de arriba respeta esa regla, así que puedes pulsarlo hasta que salga la silueta que te gusta y copiar el resultado.

border y outline: cuál mueve el layout

Parecen lo mismo, pero solo uno afecta al espacio. El border forma parte de la caja: suma a su tamaño total, o le come relleno por dentro si usas box-sizing: border-box. Añadirlo en :hover es la causa clásica de ese salto de un par de píxeles al pasar el ratón.

El outline se pinta por encima del diseño y no ocupa espacio ninguno: puedes ponerlo, engordarlo o quitarlo y nada de alrededor se mueve. Además acepta outline-offset para separarse del borde (o meterse hacia dentro con valores negativos), algo que border no puede hacer. Regla práctica: si el contorno es decoración permanente del componente, usa border; si aparece y desaparece —foco, selección, estado de arrastre—, usa outline.

El contorno del foco no se toca

Escribir outline: none para «limpiar» ese anillo azul es el error de accesibilidad más repetido del CSS. Ese anillo es lo único que le dice a quien navega con teclado dónde está parado; sin él, la página se vuelve imposible de recorrer con el tabulador. Las pautas WCAG lo exigen de forma explícita: el foco tiene que ser visible.

La solución no es quitarlo, es rediseñarlo. Usa :focus-visible para que solo aparezca en navegación con teclado, y dale tu propio grosor, color y outline-offset —un par de píxeles de separación hacen que se lea mucho mejor—. Comprueba que ese color contrasta al menos 3:1 contra el fondo; en colores en vivo tienes el ratio al instante, y en la guía de teoría del color está explicado por qué esos números importan.

Preguntas frecuentes

¿Cómo se leen los cuatro valores de border-radius?

Siempre empiezan en la esquina superior izquierda y giran en el sentido de las agujas del reloj: superior izquierda, superior derecha, inferior derecha e inferior izquierda. Con un solo valor se aplican las cuatro esquinas por igual. Con dos, el primero va a la superior izquierda y la inferior derecha, y el segundo a las otras dos. Con tres, el del medio se reparte entre la superior derecha y la inferior izquierda.

¿Qué significa la barra / dentro de border-radius?

La barra separa los radios horizontales de los verticales. Lo que va antes marca cuánto se curva cada esquina a lo ancho y lo que va después cuánto se curva a lo alto. Cuando los dos valores de una esquina son distintos, la curva deja de ser un cuarto de círculo y pasa a ser un cuarto de elipse: es la base de las formas orgánicas tipo gota.

¿En qué se diferencian border y outline?

El border forma parte de la caja: ocupa espacio real y, según el box-sizing, agranda el elemento o le come relleno por dentro. El outline se dibuja por encima del diseño y no ocupa espacio: puedes ponerlo y quitarlo sin que nada se mueva un píxel. Además el outline acepta outline-offset para separarse del borde, algo que border no puede hacer.

¿Puedo quitar el outline del foco si no me gusta cómo se ve?

Quitarlo sin poner nada en su lugar deja a quien navega con teclado sin saber dónde está, y eso incumple los criterios de accesibilidad WCAG sobre foco visible. Lo correcto es rediseñarlo, no eliminarlo: usa :focus-visible y dale al outline tu propio grosor, color y outline-offset, cuidando que contraste al menos 3:1 con el fondo.