Tailwind UI Pattern Registry for humans and agents

frame corners brackets accent card editorial luxury structure editorial promo cards with architectural framing image blocks or hero media frames premium product showcase cards framework/tech logo cards need corner brackets on all four corners without extra HTML bordered cards feel too generic want configurable frame that works with any background pseudo-element approach limits to only 2 corners

Frame Corners

Fetch snippet JSON: curl https://webspire.de/snippets/decorative/frame-corners.json
Format
Graphic accent Frame Corners

A quiet perimeter treatment for promo cards, media blocks and category tiles.

Stage Background
Customize

Quick Start

<div class="frame-corners p-8">Content with corner brackets</div>

Details

Tailwind
v4.x
Browser
baseline-2024
Size
1571 bytes · 35 lines
Custom Properties
--frame-color--frame-size--frame-thickness--frame-offset
Classes
.frame-corners
frame corners brackets accent card editorial luxury structure

Four corner brackets drawn entirely with background-image — 8 linear-gradients positioned at each corner. No pseudo-elements used, so ::before/::after stay free for other effects. Fully configurable via custom properties.

Editorial card

<article class="frame-corners rounded-none border border-stone-200 bg-white p-8">
  <p class="text-xs font-medium uppercase tracking-[0.3em] text-stone-400">Featured</p>
  <h3 class="mt-3 text-xl font-semibold">Campaign notes</h3>
  <p class="mt-2 text-sm text-stone-500">Corner brackets add architectural precision.</p>
</article>

Dark variant with offset

<div class="frame-corners bg-stone-950 p-10"
     style="--frame-color: oklch(0.7 0 0 / 0.3); --frame-offset: 8px; --frame-size: 28px;">
  <h2 class="text-2xl font-bold text-white">Premium content</h2>
  <p class="mt-2 text-stone-400">Offset brackets floating outside the padding area.</p>
</div>

Small accent on image

<div class="frame-corners overflow-hidden"
     style="--frame-color: white; --frame-size: 16px; --frame-thickness: 1.5px; --frame-offset: 6px;">
  <img src="/placeholder.svg" alt="Project" class="h-64 w-full object-cover">
</div>

Accent color with thick lines

<div class="frame-corners p-6"
     style="--frame-color: oklch(0.6 0.2 260); --frame-thickness: 3px; --frame-size: 30px;">
  <p>Bold accent brackets</p>
</div>