Generador de CSS Border-Radius

Ajusta esquinas redondeadas visualmente con vista previa en vivo y código CSS para copiar.

Radios verticales:

px
px 
{{ cssOutput }}

¿Qué es border-radius?

La propiedad CSS border-radius redondea las esquinas de un elemento. Puedes establecer un radio uniforme para las cuatro esquinas o estilizar cada esquina individualmente. La notación abreviada sigue el orden: superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda.

Radios de borde elípticos

Con la sintaxis extendida border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 puedes definir un radio horizontal y vertical para cada esquina. Esto crea curvas elípticas que producen formas más orgánicas.

Casos de uso comunes

  • Círculos: border-radius: 50% en un elemento cuadrado.
  • Forma de píldora: border-radius: 9999px para botones redondeados.
  • Tarjetas: border-radius: 8px a 16px para diseños de tarjetas modernos.
  • Formas blob: Diferentes radios horizontales y verticales para formas orgánicas.