Cargando...

Border radius CSS

Ya sabes dibujar un borde afilado alrededor de una caja. A menudo el diseño quiere esquinas más suaves — tarjetas amables, botones modernos, avatares que se leen como círculos. Eso es border-radius: cuánto se curva cada esquina.

¿Qué hace border-radius?

border-radius redondea las esquinas de la caja del borde. La curva aplica al borde y al fondo (y suele recortar imagen/overflow). Un valor mayor significa una esquina más redonda. Unidades habituales: px o %.

Un valor — las cuatro esquinas

El inicio cotidiano: una longitud para cada esquina.

Mismo radio en todas las esquinas

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}

Qué debes notar

El borde sigue la curva y el relleno blanco se queda dentro de la forma redondeada. El radio no es un segundo borde — da forma a la caja existente.

Atajo: ¿cuántos valores?

Puedes pasar una, dos, tres o cuatro longitudes. El orden de las esquinas es fijo.

📊 Cantidad de valores de border-radius

Valores Significado Nota diaria
1 Las cuatro esquinas iguales Tarjetas y paneles suaves
2 Arriba-izquierda + abajo-derecha, luego arriba-derecha + abajo-izquierda Parejas diagonales
3 Arriba-izquierda, arriba-derecha + abajo-izquierda, abajo-derecha Menos común — conoce que existe
4 Arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda Control total, en sentido horario desde arriba-izquierda

Cuatro esquinas, cuatro números

Cuando cada esquina necesita su propia curva, lista cuatro valores en sentido horario empezando arriba-izquierda.

Cuatro esquinas distintas

css
CSS Code 
.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

Dos valores — pares diagonales

Dos longitudes emparejan esquinas opuestas: la primera es arriba-izquierda y abajo-derecha; la segunda, arriba-derecha y abajo-izquierda.

Radio de dos valores en diagonal

css
CSS Code 
.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}

Botones píldora

Un radio grande (a menudo la mitad de la altura, o un valor grande como 999px) convierte un rectángulo en píldora — habitual en chips y acciones principales.

Botón con forma de píldora

css
CSS Code 
.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}

Avatares circulares

Para un círculo real, da a la caja ancho y alto iguales, luego border-radius: 50%. En una caja no cuadrada, 50% hace una elipse.

Círculo con radio del 50 por ciento

css
CSS Code 
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* recorta una foto dentro del círculo */
}

Pruébalo tú

  1. Suaviza una tarjeta con borde usando border-radius: 12px.
  2. Estila una insignia con cuatro radios de esquina distintos.
  3. Usa un radio de dos valores en un azulejo y observa el emparejamiento diagonal.
  4. Construye un botón píldora con border-radius: 999px.
  5. Haz un avatar 64×64 con border-radius: 50% — luego prueba 50% en un rectángulo ancho y compara.

Errores comunes

  • Poner un radio enorme en una caja vacía sin borde ni color y preguntarse por qué «no se ve nada»
  • Usar 50% en un rectángulo ancho y esperar un círculo perfecto (obtienes una elipse)
  • Olvidar ancho y alto iguales cuando quieres un círculo
  • Pensar que border-radius sustituye a border — sigues necesitando borde o relleno para ver bien la curva
  • Confundir el orden de las esquinas (cuatro valores: horario desde arriba-izquierda)

Resumen

  • border-radius redondea las esquinas de la caja
  • Un valor suaviza todas; cuatro valores controlan cada esquina
  • Dos valores emparejan esquinas opuestas en diagonal
  • Radios grandes hacen píldoras; 50% en un cuadrado hace un círculo
  • La curva recorta borde y fondo juntos
  • Practica la tarjeta, la píldora y el avatar hasta que las formas se sientan obvias

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial