Genere un valor border-radius de CSS

Introduzca longitudes o porcentajes CSS habituales y recibirá tanto el valor abreviado como la propiedad border-radius completa. El orden sigue la especificación CSS, por lo que podrá diseñar cada esquina de forma coherente sin tener que deducir qué posición controla cada una. Los radios negativos se rechazan porque no son válidos en las hojas de estilo.

Elija entre uno y cuatro valores de radio

Comience con la cantidad de valores adecuada para la forma que desea. Un valor aplica el mismo radio a las cuatro esquinas, una opción idónea para tarjetas, botones, campos y otros componentes simétricos. Dos valores se alternan entre esquinas opuestas: el primero controla la superior izquierda y la inferior derecha, mientras que el segundo controla la superior derecha y la inferior izquierda. Con tres valores, el primero corresponde a la esquina superior izquierda, el segundo a la superior derecha y la inferior izquierda, y el tercero a la inferior derecha. Cuatro valores permiten controlar cada esquina por separado en sentido horario: superior izquierda, superior derecha, inferior derecha e inferior izquierda. Cada entrada debe ser una longitud CSS o un porcentaje no negativo, como 8px, 0.5rem, 12% o 0. Se admite el cero sin unidad porque CSS lo permite, pero cualquier otro número necesita una unidad de longitud reconocida o el signo de porcentaje. Al mantener las entradas separadas, la correspondencia entre posiciones y esquinas queda visible antes de formar la expresión abreviada.

Interprete y utilice el CSS generado

El resultado ofrece dos campos para adaptarse a distintos flujos de trabajo. El campo border_radius contiene únicamente el valor abreviado, lo que resulta práctico cuando una aplicación ya sabe qué propiedad CSS debe establecer o cuando un sistema de tokens de diseño necesita un valor limpio. El campo css incluye la declaración completa, con el nombre de la propiedad border-radius, los dos puntos y el punto y coma, para que pueda pegarla directamente en una regla de estilo. Los valores se emiten en el mismo orden en que usted los proporcionó y separados por un único espacio. El generador no cambia silenciosamente el orden de las esquinas, no convierte unidades ni reduce valores repetidos, pues conservar la representación original vuelve predecible la salida y respeta la sintaxis intencionada de los tokens. Por ejemplo, al proporcionar 8px y 16px se obtiene border-radius: 8px 16px;, mientras que cuatro valores producen una declaración en sentido horario. La salida es determinista y no depende de mediciones del navegador, así que la API y la herramienta local devuelven las mismas cadenas.

Valide los radios antes de publicar un componente

Los radios de esquina CSS no pueden ser negativos; por ello, el generador se detiene con un error de entrada si un valor comienza con un signo menos. También rechaza entradas vacías, texto no compatible, números distintos de cero sin unidad, declaraciones con signos de puntuación y matrices que no contengan entre uno y cuatro valores. Esta validación resulta útil cuando los radios proceden de un formulario, un archivo de configuración, un editor de temas o un proceso automatizado de tokens de diseño, donde un texto mal formado podría llegar inadvertidamente a una hoja de estilo. Se aceptan unidades absolutas, relativas a la fuente, relativas a la ventana gráfica, físicas y porcentuales habituales, entre ellas px, em, rem, vw, vh, vmin, vmax, ch, cm, mm, in, pt y pc, además de variantes modernas de la ventana gráfica. Esta capacidad genera la forma abreviada estándar de radio único; no crea la sintaxis elíptica separada por una barra. Si necesita esquinas elípticas, mantenga separados los radios horizontal y vertical en su propio CSS. Use la declaración devuelta como bloque validado y previsualícela en el elemento real, ya que los porcentajes dependen de sus dimensiones.