# Crisp Borders

**SHOULD** · **ID:** `design-crisp-borders` · **Category:** design
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-crisp-borders

> SHOULD: Crisp edges via semi-transparent borders + shadows

Combine borders and shadows for clear edges

Shadows alone can look muddy. A subtle border (often semi-transparent) makes edges crisp and clear. Use rgba() with low opacity for borders so they adapt to different backgrounds.

## Bad — do not do this

`design-crisp-borders-bad`

```tsx
export function CrispBordersBad() {
  return (
    <div className="space-y-4">
      {/* Light plate: the edge treatment is the point, and it is invisible on the dark theme. */}
      <div className="rounded-xl bg-neutral-100 p-8">
        <div className="bg-white rounded-lg p-4 shadow-md">
          <h3 className="text-base font-semibold mb-1 text-neutral-900">Shadow only</h3>
          <p className="text-sm text-neutral-600">
            With no border, the card fades into the surface. There is no crisp line where it ends.
          </p>
        </div>
      </div>
      <p className="text-xs text-destructive">
        A shadow alone leaves a soft, muddy edge. The boundary of the card is a gradient, not a line
      </p>
    </div>
  );
}
```

## Good — do this

`design-crisp-borders-good`

```tsx
export function CrispBordersGood() {
  return (
    <div className="space-y-4">
      {/* Same light plate as the Bad example, so the edges compare fairly. */}
      <div className="rounded-xl bg-neutral-100 p-8">
        <div className="bg-white rounded-lg p-4 shadow-md border border-black/[0.08]">
          <h3 className="text-base font-semibold mb-1 text-neutral-900">Border and shadow</h3>
          <p className="text-sm text-neutral-600">
            A hairline border draws the edge; the shadow does the lifting.
          </p>
        </div>
      </div>
      <p className="text-xs text-success">
        A semi-transparent hairline (<code>border-black/[0.08]</code>) defines the edge while the shadow conveys
        elevation. Crisp, not muddy
      </p>
    </div>
  );
}
```

## References

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