Saltar al contenido
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Generador de esquinas redondeadas (border-radius)

Ajusta el radio de cada esquina de un elemento por separado y obtén el código CSS border-radius con vista previa en directo.

Se procesa en tu dispositivo. Nada se envía a ningún servidor.
border-radius: 24px 24px 24px 24px;

Genera la sintaxis abreviada de border-radius con los cuatro valores en el orden superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda.

Casos de uso

  • Crear una tarjeta con esquinas asimétricas.
  • Diseñar un elemento con forma de gota o burbuja de chat.
  • Ajustar visualmente el redondeo de un botón.

Cómo funciona

  1. 1

    Ajusta cada esquina

    Introduce el radio en píxeles para cada una de las cuatro esquinas.

  2. 2

    Copia el CSS

    Copia la propiedad border-radius lista para pegar.

Detalles técnicos

  • Cada esquina admite de 0 a 200 píxeles. El código sigue el orden de CSS: superior izquierda, superior derecha, inferior derecha, inferior izquierda.
  • Si el radio supera la mitad del lado del elemento, el navegador lo reduce proporcionalmente; por eso un valor muy alto en un botón pequeño da una forma de píldora.
  • Solo trabaja en píxeles. Para un círculo perfecto en un elemento cuadrado de cualquier tamaño, escribe tú border-radius: 50%.

Preguntas frecuentes

¿Puedo poner un radio distinto en cada esquina?

Sí, cada una de las cuatro esquinas se controla de forma independiente.

Herramientas relacionadas

← Colores y diseño