Retro Airmail Envelope Border

This is a Retro Airmail Envelope Border. It wraps a container with continuous diagonal red and blue stripes. Its function is to provide a nostalgic, thematic framing for content without relying on external raster image assets.

Specs

• Weight: < 1 KB.
• Performance: High. Handled entirely by the browser’s CSS rendering engine, requiring zero network requests for background assets.
• Theming: Fully controlled by CSS variables (--stripe-color1, --stripe-color2, --stripe-width).
• Responsiveness: Adapts seamlessly to any container size or viewport dimension.
• Graceful Degradation: If 100dvh is unsupported by older browsers, the container simply defaults to a standard height. The border-image property has near-universal support, ensuring visual stability.

Anatomy

• HTML: Not explicitly required. This CSS applies directly to the body or any block-level container.
• CSS: Uses border-image-source injected with a repeating-linear-gradient to generate the stripes. The border-image-slice and border-image-width properties calculate how the infinite gradient wraps precisely around the geometric edges of the element.

Logic

The elegance of this snippet lies in its use of the border-image property rather than complex background layers.

border-image-source: repeating-linear-gradient(
  142deg,
  var(--stripe-color1) 0px 30px,
  transparent 30px 50px,
  var(--stripe-color2) 50px 80px,
  transparent 80px 100px
);
border-image-slice: 40;
border-image-width: var(--stripe-width);

Instead of using multiple nested div elements or calculating precise background-position values to simulate a border, border-image natively maps a single continuous gradient texture to the elemental edges. The repeating-linear-gradient creates hard stops (0px 30px, 30px 50px), rendering perfectly crisp, resolution-independent stripes.

Feel

Nostalgic and sharp. The hard color stops in the linear gradient create crisp, vector-quality stripes that mimic physical print. It feels incredibly lightweight, bringing a tactile analog aesthetic to a flat digital screen without the performance overhead of heavy texture files.