CSS
Borders, radius y shadows
Controla bordes, esquinas y profundidad visual mediante border, border-radius, outline, box-shadow y drop-shadow sin afectar el contenido.
- Última actualización
- Actualizada
- Nivel
- Aplicación
CSS
Controla bordes, esquinas y profundidad visual mediante border, border-radius, outline, box-shadow y drop-shadow sin afectar el contenido.
.card {
border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}Forma parte del box model. Si el estilo es none, width y color no producen una línea visible.
.callout {
border-inline-start: 0.25rem solid var(--accent);
}Se adapta a dirección y writing mode.
.card {
border-radius: 1rem;
}Puede aceptar radios horizontales y verticales:
.avatar {
border-radius: 50%;
}Un círculo requiere una caja cuadrada; 50% sobre un rectángulo produce una elipse.
El background y border respetan el radius, pero contenido descendiente puede salir visualmente.
.media-card {
overflow: clip;
border-radius: 1rem;
}Recortar también puede cortar focus rings, shadows o elementos posicionados. Aplica clipping en el wrapper correcto.
.frame {
border: 12px solid transparent;
border-image: url("frame.png") 30 round;
}Divide una imagen en regiones para pintar bordes. Es potente, pero complejo para componentes simples.
.card {
box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.12);
}x | y | blur | spread | colorVarias shadows se separan por comas; la primera se pinta encima.
.input {
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
}Pinta dentro de la border box.
.logo {
filter: drop-shadow(0 0.5rem 1rem rgb(0 0 0 / 0.2));
}box-shadow sigue la caja. drop-shadow() sigue más de cerca el alpha visible de la imagen o elemento compuesto.
.button:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}No uses box-shadow decorativa como único focus indicator si puede mezclarse con fondos o ser eliminada en forced colors.
Una escala de elevation debe reflejar relaciones reales:
Más blur no significa más claridad. Combina shadow con border y contraste de superficie.
Grandes blur radii sobre áreas extensas pueden aumentar paint cost. Mide antes de convertir cada tarjeta en una sombra compleja.
¿Por qué border-radius: 50% no garantiza un círculo?
Porque los porcentajes se aplican sobre cada dimensión; una caja no cuadrada produce una elipse.
Transforms modifica la representación y el espacio de coordenadas.