Borders & Shadows

Borders

Start with .border, then layer modifiers:

<div class="border">1px outline border</div>
<div class="border border-md border-primary">Thicker, primary-colored</div>
<div class="border border-dashed border-top">Dashed, top side only</div>

• Width: border-md, border-lg, border-xl, border-xxl
• Style: border-dashed, border-dotted
• Sides: border-top / border-bottom / border-left / border-right (and logical border-block-start, border-inline-end, border-inline, border-block)
• Color: border-primary, border-secondary, border-accent, border-success, border-warning, border-danger, border-muted, border-white, border-dark, border-transparent

Gradient borders

<div class="border border-gradient gradient-cyan">Static gradient edge</div>
<div class="border border-animated">Animated glow border</div>
<div class="border border-gradient-spin">Spinning conic border</div>

Also available: border-gradient-corners. Gradient borders accept the same gradient-{name} presets as text and background gradients.

Corner radius

Named scale rounded-{none|sm|md|lg|xl|full}, with per-side rounded-t-*, rounded-r-*, rounded-b-*, rounded-l-*. Raw values: border-radius-{0|4|6|8|12|25|50}.

<div class="rounded-lg">12px corners</div>
<img class="rounded-full" src="/avatar.jpg" alt="" />
<div class="rounded-t-md">Rounded top only</div>

Shadows

Elevation scale: shadow-none, shadow-sm, shadow-md, shadow-lg, shadow-xl.

<div class="shadow-sm">Subtle lift</div>
<div class="shadow-lg">Prominent elevation</div>