Generador CSS border-radius: esquinas redondeadas sin adivinar

border-radius es una de esas propiedades CSS que parece sencilla a primera vista, pero esconde una profundidad sorprendente. Un border-radius: 8px redondea las esquinas de un botón — eso lo sabe todo el mundo. Pero la misma propiedad puede crear círculos perfectos, formas blob orgánicas y hasta animaciones morphing que dan vida a una página.

Esta guía cubre todo lo que necesitas saber sobre border-radius, desde los fundamentos hasta las técnicas más avanzadas. Y para los casos complejos, el generador CSS border-radius te ahorrará horas de prueba y error.

Qué es border-radius

border-radius redondea las esquinas de un elemento HTML. Internamente, define un radio horizontal y un radio vertical para cada una de las cuatro esquinas — hasta ocho valores en total.

La sintaxis básica:

/* Las cuatro esquinas iguales */
.element {
  border-radius: 8px;
}

/* Dos valores: arriba-abajo e izquierda-derecha */
.element {
  border-radius: 8px 16px;
}

/* Cuatro valores: arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda */
.element {
  border-radius: 8px 16px 24px 4px;
}

/* Propiedades individuales por esquina */
.element {
  border-top-left-radius: 8px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 4px;
}

El orden de los cuatro valores sigue el sentido de las agujas del reloj empezando por la esquina superior izquierda, igual que margin y padding.

px vs %: una diferencia importante

Cuándo usar px

Los píxeles son la mejor opción para elementos de tamaño fijo:

.btn    { border-radius: 6px; }
.card   { border-radius: 12px; }
.badge  { border-radius: 4px; }
.input  { border-radius: 6px; }

La ventaja de los píxeles es su previsibilidad: un border-radius: 8px en un botón pequeño y en un botón grande producirá visualmente el mismo radio de curvatura.

Cuándo usar %

Los porcentajes son relativos a las dimensiones del elemento: los radios horizontales respecto al ancho, los verticales respecto al alto.

/* Círculo perfecto (ancho = alto) */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

/* Elipse (ancho diferente al alto) */
.ellipse {
  width: 200px;
  height: 80px;
  border-radius: 50%;
}

Un cuadrado con border-radius: 50% se convierte en círculo. Un rectángulo con border-radius: 50% se convierte en elipse. Es lógica matemática: los radios se calculan proporcionalmente a cada dimensión.

Casos de uso habituales

Botones: el redondeo como señal visual

El border-radius de un botón comunica una intención de diseño:

/* Sin redondeo: serio, corporativo */
.btn-square   { border-radius: 0; }

/* Ligeramente redondeado: moderno, profesional */
.btn-subtle   { border-radius: 4px; }

/* Bien redondeado: dinámico, amigable */
.btn-rounded  { border-radius: 10px; }

/* Forma píldora: tendencia, call-to-action */
.btn-pill     { border-radius: 9999px; }

¿Por qué 9999px en lugar de 50% para los botones píldora? En un botón ancho, 50% genera elipses en los extremos en lugar de la forma cápsula deseada. Un valor de píxeles suficientemente grande garantiza siempre una forma píldora limpia, independientemente del ratio ancho/alto.

Tarjetas y contenedores

.card {
  border-radius: 16px;
  overflow: hidden; /* Imprescindible para que las imágenes no sobresalgan */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

El overflow: hidden se olvida con frecuencia. Sin él, el elemento muestra esquinas redondeadas, pero las imágenes internas siguen siendo rectangulares y sobresalen de los bordes redondeados — un error muy común entre principiantes.

Esquinas parcialmente redondeadas

Para componentes específicos como pestañas o menús desplegables:

/* Pestaña: solo redondeada arriba */
.tab {
  border-radius: 8px 8px 0 0;
}

/* Menú desplegable: solo redondeado abajo */
.dropdown {
  border-radius: 0 0 8px 8px;
}

/* Tooltip apuntando hacia abajo-izquierda */
.tooltip {
  border-radius: 8px 8px 8px 0;
}

/* Tarjeta con esquina accentuada */
.card-accent {
  border-radius: 0 16px 16px 16px;
}

Avatares e iconos circulares

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.notification-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

Formas orgánicas: la sintaxis slash

Aquí es donde border-radius revela toda su potencia. La sintaxis slash permite definir radios horizontales y verticales distintos para cada esquina:

/* Sintaxis: radios_horizontales / radios_verticales */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Antes del slash: los radios horizontales de las cuatro esquinas (arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda). Después del slash: los radios verticales en el mismo orden.

Esta sintaxis genera formas asimétricas y orgánicas — los famosos "blobs" omnipresentes en el diseño web moderno:

/* Variantes de blob */
.blob-a { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.blob-b { border-radius: 50% 50% 30% 70% / 40% 60% 50% 50%; }
.blob-c { border-radius: 70% 30% 50% 50% / 60% 40% 60% 40%; }

Encontrar los ocho valores ideales de forma manual es agotador. El generador CSS border-radius resuelve este problema: mueve los controles deslizantes, ve el resultado en tiempo real y copia el código CSS generado.

Animaciones con border-radius

border-radius es totalmente animable — los valores se interpolan fluidamente entre dos estados.

Transición al pasar el cursor

.btn {
  border-radius: 4px;
  transition: border-radius 0.25s ease;
  background: #6366f1;
  color: white;
  padding: 10px 24px;
  border: none;
  cursor: pointer;
}

.btn:hover {
  border-radius: 20px;
}

Un efecto sutil pero efectivo que hace los botones más vivos sin resultar intrusivo.

Animación blob morphing

@keyframes blobMorph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%;
  }
  75% {
    border-radius: 40% 60% 50% 50% / 60% 40% 50% 40%;
  }
}

.hero-blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  animation: blobMorph 10s ease-in-out infinite;
}

Este efecto de blob animado en el fondo es muy popular en landing pages modernas.

Transformación cuadrado a círculo

.shape {
  width: 100px;
  height: 100px;
  background: #f59e0b;
  border-radius: 8px;
  transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.shape:hover {
  border-radius: 50%;
}

La curva de Bézier con overshoot crea un efecto de rebote durante la transformación que se siente natural y juguetón.

border-radius en un sistema de diseño

Para proyectos más grandes, centraliza los valores en variables CSS:

:root {
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* Uso coherente en los componentes */
button  { border-radius: var(--radius-sm); }
.card   { border-radius: var(--radius-xl); }
.avatar { border-radius: var(--radius-full); }
input   { border-radius: var(--radius-md); }
.tag    { border-radius: var(--radius-full); }

Cambiar el estilo global de la aplicación significa modificar solo unos pocos valores de variables — todos los componentes se adaptan automáticamente.

Tailwind CSS implementa esta filosofía con sus clases rounded-sm, rounded-lg, rounded-full, etc.

Compatibilidad con navegadores

border-radius está completamente soportado por todos los navegadores modernos. La sintaxis slash también lleva años disponible sin problemas. Para proyectos actuales no hay ninguna preocupación de compatibilidad.

Por qué usar un generador

Para valores simples, escribirlos a mano es rápido. Pero para la sintaxis slash con ocho valores, las combinaciones posibles son prácticamente infinitas. Encontrar la forma orgánica que tienes en mente mediante ensayo y error puede llevar horas.

El generador CSS border-radius resuelve esto:

Controles deslizantes interactivos para los ocho valores
Vista previa en tiempo real de la forma
Código CSS listo para usar con un clic
Presets para casos habituales (círculo, píldora, blob)

Ideal para prototipado rápido y para ajustes durante las revisiones de diseño.

Resumen

border-radius va mucho más allá de simples esquinas redondeadas:

4-8px: botones, campos de formulario, badges
12-16px: tarjetas, modales, paneles
9999px: botones píldora, tags
50%: avatares circulares, iconos redondos
Sintaxis slash + %: formas blob orgánicas
Combinado con transition/animation: efectos morphing fluidos

Abre el generador CSS border-radius, mueve los controles deslizantes y descubrirás lo expresiva que puede ser esta propiedad cuando la aprovechas al máximo.