# No Side-Stripe Accent Borders

**NEVER** · **ID:** `design-impeccable-side-tab-border` · **Category:** design
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-impeccable-side-tab-border

> NEVER: Hang a thick colored stripe off one side of a card (one border side >= 2px while the others are <= 1px, in a non-neutral color, on a rounded box) — it makes the border-box asymmetric so text lands off-centre, and encodes status in hue alone. Use one even border, a tinted surface, and a leading icon plus a worded status.

Border a card evenly on all four sides instead of hanging a thick colored stripe off one edge

impeccable's detector flags an element when one side's border-width is >= 2px while the others are <= 1px (or at least twice the widest other side), the border color is non-neutral, and either the width is >= 3px or the border-radius is greater than zero — a stripe on a rounded card. The pattern is not just overused: it makes the border-box asymmetric so text lands off-center, and it encodes status in hue alone. Use one even border, a tinted surface, and a leading icon plus a worded status instead.

## Bad — do not do this

`design-impeccable-side-tab-border-bad`

```tsx
const CALLOUTS = [
  { title: 'Deploy succeeded', body: 'Build 1284 is live in production.', stripe: 'border-l-emerald-500' },
  { title: 'Usage at 82%', body: 'You are approaching the plan limit.', stripe: 'border-l-amber-500' },
  { title: 'Payment failed', body: 'Update the card on file to continue.', stripe: 'border-l-violet-500' },
];

export function ImpeccableSideTabBorderBad() {
  return (
    <div className="space-y-3">
      <p className="text-xs text-muted-foreground">Status callouts</p>

      <div className="space-y-2">
        {CALLOUTS.map((c) => (
          <div
            key={c.title}
            className={`rounded-lg border-l-4 ${c.stripe} bg-card px-4 py-3`}
          >
            <p className="text-sm font-medium text-foreground">{c.title}</p>
            <p className="text-xs text-muted-foreground">{c.body}</p>
          </div>
        ))}
      </div>

      <p className="text-xs text-error">
        A 4px colored stripe on one side of a rounded card, with no border anywhere else. Detector: one
        side {'≥'} 2px while the others are {'≤'} 1px, the color is non-neutral, and the width is{' '}
        {'≥'} 3px or the corners are rounded. The status is carried by hue alone.
      </p>
    </div>
  );
}
```

## Good — do this

`design-impeccable-side-tab-border-good`

```tsx
const CALLOUTS = [
  { title: 'Deploy succeeded', body: 'Build 1284 is live in production.', icon: '✓', tone: 'text-success' },
  { title: 'Usage at 82%', body: 'You are approaching the plan limit.', icon: '△', tone: 'text-muted-foreground' },
  { title: 'Payment failed', body: 'Update the card on file to continue.', icon: '✕', tone: 'text-error' },
];

export function ImpeccableSideTabBorderGood() {
  return (
    <div className="space-y-3">
      <p className="text-xs text-muted-foreground">Status callouts</p>

      <div className="space-y-2">
        {CALLOUTS.map((c) => (
          <div
            key={c.title}
            className="flex items-start gap-3 rounded-lg border border-border bg-muted px-4 py-3"
          >
            <span aria-hidden="true" className={`mt-0.5 text-sm leading-none ${c.tone}`}>
              {c.icon}
            </span>
            <div>
              <p className="text-sm font-medium text-foreground">
                <span className={`${c.tone} font-semibold`}>{c.title}</span>
              </p>
              <p className="text-xs text-muted-foreground">{c.body}</p>
            </div>
          </div>
        ))}
      </div>

      <p className="text-xs text-success">
        One even 1px border on all four sides, a tinted surface for separation, and a leading icon plus a
        worded status so the meaning survives without color. Nothing here trips the side-stripe detector.
      </p>
    </div>
  );
}
```

## References

- [impeccable.style](https://impeccable.style/)
- [MDN: border-left](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-left)