Control de recorte de desbordamiento

Funciones web: overflow: clip overflow-clip-margin

Mientras que overflow: hidden es un "instrumento contundente" que casi siempre recorta el contenido estrictamente en el cuadro de relleno, overflow: clip combinado con overflow-clip-margin proporciona el "bisturí" para un control de diseño detallado en los contenedores de bloques.

Especifica exactamente dónde se produce el recorte con overflow: clip y overflow-clip-margin. Puedes alinear el límite con precisión con los bordes internos del modelo de caja o extender el límite de recorte más allá de la caja del elemento con un desplazamiento especificado (un margen de seguridad). Este enfoque moderno es de alto rendimiento y elimina el requisito heredado de agregar contenedores de wrapper adicionales con padding personalizado y márgenes negativos solo para permitir que los efectos visuales (como las sombras prominentes de los elementos secundarios) se rendericen sin recortes.

Los elementos reemplazados (<img>, <video>, <canvas>, etc.) se establecen de forma predeterminada en overflow: clip y overflow-clip-margin: content-box, lo que te permite controlar que las imágenes de contenedor que usan object-fit o border-radius se contengan de forma limpia.

Cómo implementarla

  1. Aplicar overflow: clip: Asegúrate de que el elemento de destino tenga habilitado overflow: clip. El parámetro de configuración overflow: clip es obligatorio en los contenedores de diseño de bloques para que overflow-clip-margin se aplique. Si overflow se establece en hidden, auto o scroll, el navegador ignora la propiedad overflow-clip-margin. overflow: clip impide todo el desplazamiento (tanto el iniciado por el usuario como el programático a través de JavaScript).
  2. Alinear con un borde de cuadro: Usa palabras clave para alinear con precisión el límite de recorte con los bordes internos del modelo de cuadro:
    • content-box: Recorta el contenido exactamente donde comienza el área de contenido, lo que deja el área de padding completamente limpia. El contenido se detiene justo en el borde del padding. Excelente para módulos de diseño anidados.
    • padding-box (predeterminado): Recorta el contenido en el borde interior del borde.
    • border-box: Recorta el contenido en el borde exterior, lo que permite que el contenido se ubique debajo de un borde translúcido o se superponga parcialmente con él.
  3. Define un desplazamiento especificado (el sangrado): Proporciona un valor de longitud (p.ej., 15px o 5px) para crear una zona de seguridad antes de cortar píxeles. Esto permite que las sombras prominentes de los elementos secundarios se rendericen sin recortarse más allá del borde del límite sin expandir la geometría del diseño.
  4. Combinar Box-Edge y Offset: Especifica un borde de cuadro y un desplazamiento de longitud de forma simultánea (p.ej., content-box 15px) para desplazarte desde un borde de cuadro específico.

Código de ejemplo

En los siguientes ejemplos, se muestran los controles de diseño de contenedores dinámicos, con un marco anidado de curva de contenido interno automatizado y protección de sombras de elementos secundarios, junto con resguardos de mejora progresiva.

Contenedores de bloques: curvas redondeadas anidadas

  • Aplica overflow-clip-margin: content-box a un contenedor superior con esquinas redondeadas y padding personalizado.
  • Aplica esquinas redondeadas similares en los componentes de contenido multimedia y pie de página secundarios internos a lo largo del límite concéntrico del cuadro de contenido interno, lo que resuelve las curvas de anidamiento incómodas sin lógica de calc() personalizada.
<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

Contenedores de bloque: Sangrado de sombra de elemento secundario

  • Aplica overflow: clip y define un desplazamiento de longitud overflow-clip-margin extendido para crear una zona de seguridad visible que permita que la sombra del elemento secundario se renderice sin recortarse fuera del contenedor superior sin alterar la geometría del diseño. Sin esto, la sombra del elemento secundario se recorta en el límite del elemento superior.
<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

Implementación estratégica y prácticas recomendadas

  • SÍ aplica overflow: clip en los elementos de destino cuando uses overflow-clip-margin, ya que establecer overflow estrictamente en clip es obligatorio en los contenedores de diseño de bloques estándar para activar los márgenes de recorte curvos personalizados o internos.
  • SÍ establece overflow-clip-margin: content-box en contenedores con relleno y esquinas redondeadas para recortar automáticamente los elementos secundarios internos no redondeados en curvas de borde anidadas matemáticamente perfectas sin lógica de resta de relleno manual.
  • SÍ configura overflow-clip-margin con un desplazamiento de longitud especificado cuando apliques efectos visuales externos (como filter: drop-shadow()) para evitar el truncamiento brusco del cuadro delimitador sin alterar ni expandir la geometría del diseño.
  • NO apliques overflow: clip si el contenedor requiere manipulación programática del desplazamiento a través de JavaScript o sirve como contexto de diseño inmediato para los elementos position: sticky, ya que clip inhabilita por completo el desplazamiento.

Estrategias de resguardo

En el caso de los entornos de destino que no tienen compatibilidad nativa con overflow: clip o overflow-clip-margin, las estrategias de resguardo de mejora progresiva dependen directamente de la intención visual:

  • Usa overflow: hidden como experiencia base para garantizar que se mantengan los límites principales.
  • Usa overflow: visible como resguardo en los elementos en los que no se deben truncar las sombras paralelas ni las insignias de esquina externas.

Completa la implementación de resguardo de mejora progresiva

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}