Bordes, radios y outlines en CSS

Los bordes: estilos, esquinas redondeadas y outlines que no mueven el layout.

.tag {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding-inline: 0.6rem;
}

.card {
  border-radius: 0.75rem 0.75rem 0 0;
  border-block-end: 3px solid #7c5cff;
}

.avatar {
  border-radius: 50%;
  outline: 2px solid #14161c;
  outline-offset: -2px;
}

Cómo funciona

1. Cada esquina acepta dos radios para formar una elipse.
2. El outline se dibuja fuera de la caja y nunca mueve nada.
3. border-radius con porcentaje convierte un cuadrado en círculo.

Palabras clave y builtins usados aquí

• border
• outline
• px
• rem

El intento, en números

Líneas

16

Caracteres a escribir

253

Tokens

62

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 50 segundos.

Escribe este fragmento

Paso 3 de 6 en Cajas; paso 16 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →