Curso de CSS / bordes, esquinas redondeadas y sombras

Los bordes en CSS definen el borde visible de una caja, border-radius redondea sus esquinas, y box-shadow agrega una sombra sin aumentar su tamaño en el diseño. Las sombras aún pueden ser recortadas por la configuración de desbordamiento de un ancestro, y un borde redondeado no recorta automáticamente a todos los elementos hijos.

Establece el ancho, estilo y color del borde

.card { border: 2px solid #3d6b89; }

La abreviatura border combina ancho, estilo y color. solid dibuja una línea continua, dashed dibuja guiones, y dotted dibuja puntos. Un estilo none suprime el borde esperado incluso si hay un ancho y color presentes. Use border-bottom o border-block-end cuando solo un borde de un lado sea necesario. Para más detalles, vea El Modelo de Caja CSS: Contenido, Relleno, Borde y Margen.

Con un ancho fijo de border-box, aumentar el grosor del borde reduce el espacio interno mientras se mantiene el ancho exterior. Un borde decorativo o una sombra tienen un papel diferente al contorno de enfoque que identifica el objetivo actual del teclado. Mantén visible ese indicador. Ver MDN: border.

Compara longitudes y porcentajes de las esquinas

.round { border-radius: 12px; }

.circle { width: 80px; height: 80px; border-radius: 50%; }

.oval { width: 160px; height: 80px; border-radius: 50%; }

Un valor de longitud como 12px especifica el radio de la esquina. Puedes dar valores diferentes a las cuatro esquinas, pero compáralos primero con un valor. Si aplicas 50% a un cuadro con el mismo ancho y alto, se verá como un círculo, y si los tamaños horizontal y vertical son diferentes, se verá como una elipse. El radio horizontal del porcentaje se basa en el ancho, y el radio vertical se basa en la altura.

Las esquinas redondeadas del contenedor padre no recortan automáticamente la imagen hija. Elige entre darle el border-radius a la propia imagen o recortar el desbordamiento del contenedor padre, dependiendo de tu objetivo. Si agregas hidden al padre, la sombra/enfoque del hijo también puede cortarse en el borde. La siguiente comparación distingue qué caja está siendo recortada. Puedes revisar el cálculo del radio en la descripción de border-radius de MDN.

Lee los valores de la sombra

.shadow { box-shadow: 0 8px 24px 4px rgb(0 0 0 / 16%); }

Se requieren las dos primeras longitudes y el desenfoque y la expansión se pueden omitir. El radio de desenfoque no puede ser negativo. Agregar inset es la sombra interna, por defecto es la sombra externa. También hay una manera de agregar múltiples sombras, pero primero verifica cambiando el movimiento y el tamaño de una sombra por separado.

Una sombra no reserva espacio en el diseño. No desplazará una tarjeta siguiente por la cantidad de su desenfoque o expansión. Las sombras grandes pueden oscurecer el contenido cercano, así que proporciona espacio real con márgenes o huecos de diseño cuando sea necesario. Ver MDN: box shadow.

Encuentra el ancestro que recorta una sombra

.frame { padding: 12px; overflow: visible; }

.frame.clip { overflow: hidden; }

.frame .card { box-shadow: 0 18px 20px 8px rgb(0 0 0 / 25%); }

Las dos últimas tarjetas tienen padres .frame separados. Sus sombras de hijos son idénticas, pero un padre permite overflow visible y el otro lo recorta. La sombra se extiende más allá del padding de 12px del padre, por lo que la versión con overflow oculto la corta en el límite del padre. Inspecciona ese ancestro al diagnosticar una sombra recortada. Consulta CSS Overflow, Ajuste de Texto Largo y Elipsis.

Distingue entre aplicar overflow: hidden a la propia tarjeta y aplicarlo a un ancestro que recorta la sombra de esa tarjeta. Este ejercicio es una situación en la que un padre corta la sombra externa de una tarjeta hija. Si la sombra no es visible en la página real, deberías revisar no solo el valor de la tarjeta en sí, sino también el overflow y el borde del elemento padre.

Ejecuta el ejemplo y compara los cambios

Guarda el siguiente código como UTF-8 en borders.html. Se incluyen comparaciones de bordes, esquinas redondeadas, sombras externas, sombras internas, círculos y elipses, y truncamiento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing borders, corners, and shadows</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 16px/1.6 sans-serif; background: #f6f8fa; }
    .card { width: 100%; max-width: 320px; margin-block: 24px; padding: 20px; background: white; }
    .border { border: 2px solid #3d6b89; }
    .round { border: 2px solid #3d6b89; border-radius: 12px; }
    .shadow { border-radius: 12px; box-shadow: 0 8px 24px 4px rgb(0 0 0 / 16%); }
    .inset { box-shadow: inset 0 0 12px 2px rgb(0 0 0 / 20%); }
    .shape { width: 80px; height: 80px; margin-block: 16px; border-radius: 50%; background: #6eb898; }
    .oval { width: 160px; }
    .frame { width: 100%; max-width: 320px; padding: 12px; margin-block: 24px; background: #dce8f1; overflow: visible; }
    .frame .card { margin: 0; max-width: none; height: 100px; box-shadow: 0 18px 20px 8px rgb(0 0 0 / 25%); }
    .clip { overflow: hidden; }
  </style>
</head>
<body>
  <h1>Card boundaries and shadows</h1>
  <div class="card border">Card with a border only</div>
  <div class="card round">Border and rounded corners</div>
  <div class="card shadow">Outer shadow</div>
  <div class="card inset">Inset shadow</div>
  <h2>50% Edges: Circles and Ovals</h2><div class="shape" role="img" aria-label="80×80 circle"></div><div class="shape oval" role="img" aria-label="160×80 ellipse"></div>
  <h2>Parent: overflow: visible</h2><div class="frame"><div class="card">Child shadow visible outside the parent</div></div>
  <h2>Parent: overflow: hidden</h2><div class="frame clip"><div class="card">Child shadow clipped at the parent boundary</div></div>
</body>
</html>

1. Cambia el grosor del .border de 2px a 8px. En ventanas anchas, asegúrate de que se mantenga el ancho exterior y se reduzca el espacio interior, luego vuelve a 2px.
2. Cambia el ancho del .shape de 80px a 160px. Asegúrate de que el círculo se convierta en una elipse si mantienes la altura en 80px. Restaura al ancho original.
3. Cambia el desplazamiento horizontal de la .shadow a 20px y el desplazamiento vertical a -8px. Mantén el desenfoque en 24px y compara solo la dirección del movimiento. Luego, cambia el desenfoque a 0, compáralo con el borde nítido y luego devuélvelo a su valor original.
4. Cambia el spread de 4px a -4px. Observa si el tamaño de la sombra disminuye. Cambia hidden por visible en el segundo .frame y comprueba si vuelve a verse la sombra fuera del padre. Después restaura hidden.

Si apenas distingues la sombra, verifica la opacidad del color y el contraste del fondo, y si solo un lado está recortado, revisa el borde y el desbordamiento del elemento padre. Si el contenido hijo dentro de la esquina sobresale, también comparamos el método de dar esquinas redondeadas al propio hijo. Ajusta los efectos conservando la legibilidad del contenido y la facilidad de uso de los controles.