Vista previa de bordes

Aplica border-radius: 50% a un elemento cuadrado para crear un círculo perfecto. Establece las cuatro esquinas en 50%.

Sí, border-radius puede tener cuatro valores individuales: top-left, top-right, bottom-right, bottom-left. Esto permite formas asimétricas únicas.

De seis a doce píxeles en botones y de ocho a dieciséis en tarjetas funciona en casi cualquier interfaz. Más que la cifra exacta importa la coherencia: si en una misma pantalla los botones y los campos de texto llevan radios distintos, el conjunto se lee desordenado. Cuando hay una imagen dentro de una tarjeta, dale al elemento interior un radio algo menor que al exterior, o las dos curvas chocarán a la vista.

El 50 % significa «la mitad de cada lado», así que si el elemento no es cuadrado los radios horizontal y vertical difieren y sale una elipse. Para un círculo de verdad, pon width y height con el mismo valor o añade aspect-ratio: 1. Si quieres forma de píldora en algo como un botón cuyo ancho depende del texto, usa un valor fijo grande como 9999px en lugar de 50 %: los extremos quedarán siempre como semicírculos perfectos a la altura que tenga.