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-neutral, border-white, border-black, border-dark, border-transparent
• Opacity: border-opacity-{0|5|10|20|…|90|100} fades the border color toward transparent

border-neutral uses the body text color (--cffy-on-background), so it is dark in light mode and light in dark mode. border-white, border-black and border-dark stay the same in both modes.

<div class="border border-neutral border-opacity-10">Subtle neutral divider</div>
<div class="border border-md border-black">Solid black edge</div>

Gradient borders

<div class="border border-gradient gradient-cyan">Static gradient edge</div>
<div class="isolate">
  <div class="border border-animated bg-surface-pane">Animated glow border</div>
</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; without one, border-gradient and border-animated use primary.

border-animated paints its glow behind the element, so give the element a background and its parent isolate. .pane-content already isolates itself when it contains one.

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>