Skip to main content
Toolzer — Free Online Tools

Generador de border-radius CSS

Diseña esquinas redondeadas visualmente por esquina con vista previa y CSS listo.

Acerca de la herramienta

El generador de border-radius es una herramienta visual para diseñar esquinas redondeadas en CSS con vista previa en vivo. Controla cada esquina de forma independiente (superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda) con controles deslizantes, incluyendo radios horizontal/vertical distintos (forma elíptica) mediante border-radius: 30px 10px / 15px 5px. Genera CSS limpio listo para pegar — ideal para tarjetas, botones, avatares circulares u ovalados y contenedores modernos con formas orgánicas. Todo funciona en el navegador y los cambios aparecen al instante.

Preguntas frecuentes

¿Diferencia entre border-radius simple y complejo?

border-radius: 20px aplica el mismo radio a las 4 esquinas. 20px 10px 30px 5px define cada esquina en orden: sup-izq, sup-der, inf-der, inf-izq.

¿Cómo hago un círculo perfecto?

Usa border-radius: 50% en un elemento cuadrado (mismo ancho y alto).

¿Qué son los radios horizontal/vertical (barra /)?

La sintaxis 20px / 10px significa radio horizontal 20px y vertical 10px, produciendo esquinas elípticas.

¿Funciona con imágenes?

Sí. Cualquier img acepta border-radius, típicamente 50% para avatares circulares.

¿Se pueden usar porcentajes?

Sí. El porcentaje se calcula respecto al ancho (horizontal) o alto (vertical) del elemento.