Controla el border-radius de cada esquina con sliders visuales
border-radius: 8px;
También podrías necesitar
La propiedad `border-radius` en CSS permite redondear las esquinas de cualquier elemento. Aunque su forma básica acepta un solo valor para todas las esquinas, la forma completa admite hasta cuatro valores independientes (top-left, top-right, bottom-right, bottom-left) e incluso radios elípticos con la sintaxis de barra (`8px 4px / 2px 6px`). Esta herramienta cubre el caso de uso más común: definir visualmente el radio de cada esquina con sliders intuitivos, con la opción de enlazar todas las esquinas para control uniforme. Los presets incluyen los valores más usados en sistemas de diseño: desde 0px (formularios estrictos) hasta 9999px (Pill, para botones completamente redondos). La preview te muestra el resultado sobre un fondo oscuro para máxima visibilidad, y el CSS generado usa siempre la forma más corta: si todas las esquinas son iguales, genera `border-radius: 8px` en lugar de la forma de 4 valores redundante.
¿Qué significa el shorthand de 4 valores en border-radius?
La notación `border-radius: TL TR BR BL` sigue el sentido de las agujas del reloj empezando por la esquina superior izquierda: Top-Left, Top-Right, Bottom-Right, Bottom-Left. Si usas 2 valores, el primero aplica a TL y BR (diagonal principal) y el segundo a TR y BL (diagonal secundaria). Un solo valor aplica a todas las esquinas por igual.
¿Cómo creo un botón 'pill' o 'capsule'?
Usa un valor muy grande como 9999px o 9em. El navegador aplica el máximo posible (que es la mitad del lado más corto del elemento), resultando en semicírculos perfectos en los extremos. Es la técnica estándar para pills y badges — más robusta que usar 50% porque 50% en elementos no cuadrados crea óvalos, no pills.
¿Puedo usar porcentajes en border-radius?
Sí, CSS acepta porcentajes. `border-radius: 50%` en un elemento cuadrado crea un círculo perfecto. En elementos no cuadrados crea una elipse. Esta herramienta usa valores en px para mayor precisión y consistencia entre tamaños de elementos — el valor en px siempre produce el mismo radio visual independientemente de las dimensiones del elemento.
¿El border-radius afecta el área clickeable del elemento?
No directamente. Las esquinas redondeadas son visuales — el área de clic sigue siendo el rectángulo completo del elemento incluyendo las esquinas transparentes. Si necesitas que el área clickeable también sea circular o redondeada, puedes usar `clip-path: border-box` o manejar los clicks por coordenadas en JavaScript.
¿Funciona con imágenes y videos también?
Sí. border-radius funciona en cualquier elemento HTML: divs, imágenes (img), videos, inputs, buttons, etc. Para imágenes, usa `overflow: hidden` en el contenedor para que el border-radius recorte correctamente la imagen. Para img directamente, el border-radius recorta el renderizado de la imagen sin necesidad de overflow.