La propiedad border-radius de CSS permite definir la curvatura de las esquinas de los elementos HTML para suavizar el diseño de una interfaz. El Generador de Border Radius es una herramienta visual que facilita la configuración de estos valores mediante controles deslizantes, generando el código CSS correspondiente de forma inmediata.
Funcionamiento del generador y controles disponibles
La herramienta permite modificar la redondez de las esquinas de una caja de manera conjunta o individual. El comportamiento de los controles varía según las opciones seleccionadas en la interfaz:
- Deslizadores de control: Permiten ajustar el radio de curvatura en un rango de 0 a 100.
- Cuando la opción Enlazar todas las esquinas está activa, un único deslizador etiquetado como Todas las esquinas controla todo el contorno simultáneamente.
- Cuando se desactiva esta opción, se presentan cuatro deslizadores independientes que corresponden a las posiciones Superior izquierda, Superior derecha, Inferior derecha e Inferior izquierda. El orden de estos controles sigue el sentido de las agujas del reloj.
- Si se activa la opción Esquinas elípticas, cada una de las esquinas pasa a tener dos deslizadores diferenciados: uno para el radio Horizontal y otro para el radio Vertical.
- Selector de unidad: Permite alternar entre píxeles (px) y porcentaje (%).
- Preajustes: Botones de acceso rápido que aplican configuraciones predefinidas para lograr formas específicas con un solo clic:
- Recto: Elimina cualquier redondez.
- Redondeado: Aplica una curvatura estándar.
- Círculo: Configura todas las esquinas al 50%.
- Blob: Genera una forma orgánica irregular.
- Hoja: Crea una estructura simétrica con esquinas opuestas puntiagudas y redondeadas.
El valor inicial del deslizador al cargar la herramienta es de 24, lo que genera el código border-radius: 24px;. En la pantalla se muestra una vista previa visual de la caja con los bordes aplicados y, justo debajo del encabezado CSS, se expone el código resultante junto al botón Copiar CSS.
Comportamiento de las unidades: píxeles frente a porcentajes
La elección de la unidad de medida transforma la manera en que el navegador calcula la curvatura de las esquinas:
- Unidad de píxeles (px): Define un radio de curvatura fijo. La esquina se redondea exactamente la cantidad de píxeles indicada, sin importar el tamaño que tenga el elemento contenedor.
- Unidad de porcentaje (%): Define la curvatura en relación con las dimensiones de la caja. El porcentaje aplicado al radio horizontal se calcula respecto al ancho total del elemento, mientras que el porcentaje del radio vertical se calcula respecto a su altura. Debido a esta relación con las dimensiones del contenedor, si se aplica un valor del 50% en todas las esquinas de un elemento perfectamente cuadrado, este se transforma en un círculo.
El modo elíptico y la sintaxis de barra en CSS
Por defecto, cuando la opción Esquinas elípticas está desactivada, cada esquina se comporta como un cuarto de círculo perfecto, definido por un único valor de radio.
Al activar las Esquinas elípticas, se habilita la capacidad de asignar un radio horizontal y un radio vertical distintos para cada esquina. Esto permite crear curvas de transición más suaves y formas orgánicas asimétricas, conocidas habitualmente como «blob».
En el código CSS, esta distinción se traduce en la sintaxis de barra inclinada (/):
- Los valores situados antes de la barra corresponden a los radios horizontales.
- Los valores situados después de la barra corresponden a los radios verticales.
El generador escribe automáticamente esta estructura de dos valores con barra cuando el modo elíptico está activo, y regresa de forma automática a la sintaxis simplificada y corta cuando las esquinas vuelven a ser redondas y simétricas.
Creación de círculos perfectos y botones tipo píldora
Para lograr ciertas estructuras comunes en el diseño web, se deben seguir reglas de proporción específicas:
- Círculo perfecto: Requiere partir de un elemento con una relación de aspecto cuadrada (mismo ancho que alto). En la herramienta, se debe activar la opción Enlazar todas las esquinas, seleccionar la unidad de porcentaje (%) y arrastrar el control hasta el 50%. También se puede obtener directamente pulsando el preajuste Círculo.
- Botón tipo píldora: Se utiliza para botones alargados donde los extremos laterales deben ser completamente semicirculares, independientemente de la anchura del botón. Para conseguirlo, se debe mantener la unidad en píxeles (px) y arrastrar el deslizador de las esquinas hasta superar la mitad de la altura total del elemento. Al sobrepasar este límite, los lados se mantienen redondeados de forma óptima sin deformar la estructura.
Privacidad y procesamiento de datos
El procesamiento de los datos de configuración se realiza de manera local. Cada forma geométrica se dibuja directamente en el navegador web del usuario. Ninguno de los valores de configuración ni de los parámetros introducidos en la herramienta se sube a BroBroGo.
Preguntas frecuentes
¿Cómo funcionan las cuatro esquinas y px frente a %?
Los cuatro deslizadores corresponden, en sentido horario, a las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda. En píxeles la esquina se redondea una cantidad fija; en porcentaje se redondea según la caja: el porcentaje horizontal sigue el ancho y el vertical sigue el alto, así que al 50% un cuadrado se convierte en círculo.
¿Qué hace el modo elíptico?
Desactivado, cada esquina es un cuarto de círculo con un único radio. Al activarlo, cada esquina recibe un radio horizontal y otro vertical por separado, que es como se crean las formas «blob» suaves y orgánicas. La herramienta escribe por ti la forma de dos valores con barra y vuelve a la forma corta cuando las esquinas son redondas otra vez.
¿Cómo hago un círculo perfecto o una píldora?
Enlaza las esquinas, cambia a porcentaje y pon 50%: un cuadrado se vuelve un círculo. Para un botón tipo píldora, quédate en píxeles y arrastra una esquina más allá de la mitad de la altura del botón; los lados quedan totalmente redondeados a cualquier ancho. El preajuste Círculo deja listo el primer caso con un clic.