Cómo generar un radio de borde CSS para cuatro esquinas

Introduce los cuatro radios en el orden de las esquinas, elige una unidad y genera la declaración border-radius. Si omites valores, se usa 10, y si omites la unidad, se usa px.

Para qué sirve

Este generador sirve para preparar una declaración CSS border-radius sin escribir a mano la combinación de valores de las esquinas. Puedes usarlo cuando un bloque necesita esquinas redondeadas uniformes o cuando cada esquina debe tener un radio distinto.

La herramienta trabaja con cuatro posiciones independientes: superior izquierda, superior derecha, inferior derecha e inferior izquierda. También permite elegir la unidad que acompañará a cada valor. Si dejas una posición sin indicar, se utiliza 10; si no eliges una unidad, se utiliza px.

Pasos

1. Abre el generador y localiza los campos correspondientes a las cuatro esquinas.
2. Introduce el valor de la esquina superior izquierda.
3. Añade el valor de la superior derecha, después el de la inferior derecha y, por último, el de la inferior izquierda. Respeta este orden, porque es el orden que aparecerá en la declaración generada.
4. Selecciona la unidad que quieras utilizar, por ejemplo px, % o la unidad de texto que necesites para tu caso.
5. Comprueba los valores antes de generar el resultado. Si omites una esquina, el generador toma 10; si omites la unidad, añade px.
6. Genera la declaración y copia el resultado en la regla CSS del elemento al que quieras aplicar las esquinas redondeadas.

Para un diseño simétrico, puedes introducir el mismo valor en las cuatro posiciones. Para un diseño asimétrico, escribe un valor diferente en cada campo. También puedes usar 0 en una esquina si quieres que esa posición no tenga radio. La unidad que hayas proporcionado se añade a cada valor de la declaración resultante.

Cómo interpretar el resultado

El resultado es una declaración CSS de border-radius para las esquinas redondeadas. Lee los valores de izquierda a derecha según el orden de las posiciones: superior izquierda, superior derecha, inferior derecha e inferior izquierda. Así puedes verificar que una configuración asimétrica no ha cambiado de posición.

Revisa también que la unidad aparezca junto a cada valor. Si se ha omitido la unidad, la salida usa px; si se ha proporcionado una unidad, esa misma unidad se incorpora a cada esquina. La salida se limita a la declaración de border-radius: no constituye una hoja de estilos completa ni añade otras reglas visuales.

Si necesitas ajustar el diseño, vuelve a cambiar los campos y genera otra declaración. Una configuración uniforme resulta adecuada cuando las cuatro esquinas deben compartir el mismo radio; una configuración con cuatro valores permite controlar cada esquina por separado.

Ejemplo práctico

Una tarjeta necesita cuatro radios distintos para que sus esquinas tengan un acabado asimétrico.

Introduce 12 para la esquina superior izquierda, 8 para la superior derecha, 4 para la inferior derecha y 0 para la inferior izquierda; selecciona px y genera la declaración.

El resultado es una generación correcta que contiene una declaración CSS border-radius con los cuatro valores en el orden indicado y la unidad incorporada.

Limitaciones

• La salida se limita a una declaración CSS border-radius; no es una hoja de estilos completa ni incluye otras reglas.

Errores frecuentes

• Confundir el orden de las esquinas. Si colocas el valor de la esquina inferior derecha en otro campo, la declaración conservará ese orden equivocado. Corrige la entrada siguiendo la secuencia superior izquierda, superior derecha, inferior derecha e inferior izquierda.

Preguntas frecuentes

¿Puedo crear un radio uniforme para las cuatro esquinas?

Sí. Introduce el mismo valor en las cuatro posiciones y selecciona la unidad que quieras usar. La herramienta genera una declaración CSS de border-radius con esa configuración.

¿Puedo asignar un radio diferente a cada esquina?

Sí. Escribe un valor distinto en cada campo y conserva el orden superior izquierda, superior derecha, inferior derecha e inferior izquierda. La declaración coloca los valores en esa misma secuencia.

¿Qué ocurre si dejo campos sin rellenar?

Si omites una esquina, se utiliza 10. Si no indicas una unidad, se utiliza px; cuando proporcionas una unidad, esta se añade a cada valor generado.