border-<palette>-<shade>, divide-*, ring-* colors.

Syntax#

html
<div class="border border-slate-200 dark:border-slate-700">Adaptive</div>

All palettes apply#

Every palette in the colors/index|color system generates a border-* class: border-slate-500, border-gray-500, border-zinc-500, border-neutral-500, border-stone-500, border-red-500, border-orange-500, border-amber-500…

Patterns#

  • Hairlines: border-slate-200 dark:border-slate-800
  • Focus: ring-2 ring-blue-500
  • Dividers: divide-y divide-slate-100

colors/index|Color hub · concepts/dark-mode-strategies|Dark mode · accessibility/color-contrast|Contrast