Double Border

Fetch snippet JSON: curl https://webspire.de/snippets/decorative/double-border.json

Preview

Background

Customize

db color

oklch(0.85 0.005 75)

db width 1px

db offset 4px db radius 0.75rem

Quick Start

<div class="double-border rounded-xl border border-stone-200 bg-white p-6">Content</div>

Details

Tailwind: v4.x
Browser: baseline-2024
A11y: prefers-reduced-motion
Size: 1076 bytes · 51 lines
Custom Properties: --db-color--db-offset--db-radius--db-width
Classes: .double-border.double-border-hover

border double frame offset outline pseudo-element card

An outer border ring offset from the element via ::before pseudo-element with negative inset. The outer radius auto-adjusts to match the inner radius plus offset. Two variants: always-visible and hover-reveal (scales in from 0.98 with opacity).

Framework card with double border

<div class="double-border rounded-xl border border-stone-200 bg-white p-6">
  <img src="react-logo.svg" alt="React" class="h-8 w-8">
  <h3 class="mt-3 font-semibold">React</h3>
  <p class="mt-1 text-sm text-stone-500">Build with components</p>
</div>

Hover-reveal variant

<div class="double-border-hover rounded-xl border border-stone-200 bg-white p-6 transition-shadow hover:shadow-lg">
  <h3 class="font-semibold">Feature</h3>
  <p class="mt-1 text-sm text-stone-500">Hover to see the outer frame appear.</p>
</div>

Accent color with wider offset

<div class="double-border rounded-lg border border-indigo-200 bg-white p-6"
     style="--db-color: oklch(0.7 0.15 260 / 0.3); --db-offset: 6px; --db-radius: 0.5rem;">
  <p>Accent-colored outer frame</p>
</div>