Saltar al contenido principal

Generador de Border Radius CSS

Herramienta gratuita en línea para crear visualmente CSS border-radius y copiar el código.

Preview

Modo

Redondeo

px

Código CSS

border-radius: 20px;

Preajustes

Características Principales​

  • 2 Modos: Modo todo, Modo esquinas individuales
  • Vista Previa en Tiempo Real: Ver cambios instantáneamente
  • Control Fino: Rango de 0-200px
  • 9 Ajustes Preestablecidos: Estilos redondeados comunes
  • Copiar con Un Clic: Copiar código CSS instantáneamente

¿Qué es Border Radius?​

border-radius es una propiedad CSS que redondea las esquinas de los elementos.

Sintaxis Básica​

/* Todas las esquinas iguales */
border-radius: 10px;

/* Esquinas individuales */
border-radius: 10px 20px 30px 40px;
/* Orden: arriba-izq, arriba-der, abajo-der, abajo-izq */

Estilos Preestablecidos​

Square (Cuadrado)​

border-radius: 0px;

Esquinas afiladas, diseño clásico

Slightly Rounded (Ligeramente Redondeado)​

border-radius: 4px;

Redondez sutil, sensación refinada

Rounded (Redondeado)​

border-radius: 8px;

Redondez moderada, más versátil

Very Rounded (Muy Redondeado)​

border-radius: 16px;

Sensación suave, diseño amigable

Pill (Píldora)​

border-radius: 50px;

Perfecto para botones y etiquetas

Circle (Círculo)​

border-radius: 9999px; /* o 50% */

Imágenes de perfil, iconos

Top Only (Solo Arriba)​

border-radius: 12px 12px 0 0;

Encabezados de modal, partes superiores de tarjetas

Bottom Only (Solo Abajo)​

border-radius: 0 0 12px 12px;

Pies de modal, menús desplegables

Blob (Forma Orgánica)​

border-radius: 30px 60px 30px 60px;

Formas orgánicas, diseño único

Compatibilidad del Navegador​

  • ✅ Chrome 5+
  • ✅ Firefox 4+
  • ✅ Safari 5+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ Todos los navegadores móviles

Herramientas Relacionadas​