Saltar al contenido

Generador de esquinas redondeadas (border-radius)

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

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

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.

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.

Preguntas frecuentes

¿Puedo poner un radio distinto en cada esquina?
Sí, cada una de las cuatro esquinas se controla de forma independiente.
Colores y diseño