Above the divider.
Below the divider.
<div class="w-full space-y-4 text-center">
<p>Above the divider.</p>
<hr class="hr" />
<p>Below the divider.</p>
</div>
Size
Use Tailwind’s border width utilities to adjust thickness.
Default border-t-2 border-t-4 border-t-8 <div class="w-full space-y-4">
<code class="inline-block code">Default</code>
<hr class="hr" />
<code class="inline-block code">border-t-2</code>
<hr class="hr border-t-2" />
<code class="inline-block code">border-t-4</code>
<hr class="hr border-t-4" />
<code class="inline-block code">border-t-8</code>
<hr class="hr border-t-8" />
</div>
Style
Use Tailwind’s border style utilities to adjust visual style.
border-solid border-dashed border-dotted border-double <div class="w-full space-y-4">
<code class="inline-block code">border-solid</code>
<hr class="hr border-solid" />
<code class="inline-block code">border-dashed</code>
<hr class="hr border-dashed" />
<code class="inline-block code">border-dotted</code>
<hr class="hr border-dotted" />
<code class="inline-block code">border-double</code>
<hr class="hr border-4 border-double" />
</div>
Colors
Use any Tailwind or Skeleton colors or pairing .
border-primary-500 border-secondary-500 border-tertiary-500 border-success-500 border-warning-500 border-error-500 border-surface-950-50 <div class="w-full space-y-4">
<code class="inline-block code">border-primary-500</code>
<hr class="hr border-primary-500" />
<code class="inline-block code">border-secondary-500</code>
<hr class="hr border-secondary-500" />
<code class="inline-block code">border-tertiary-500</code>
<hr class="hr border-tertiary-500" />
<code class="inline-block code">border-success-500</code>
<hr class="hr border-success-500" />
<code class="inline-block code">border-warning-500</code>
<hr class="hr border-warning-500" />
<code class="inline-block code">border-error-500</code>
<hr class="hr border-error-500" />
<code class="inline-block code">border-surface-950-50</code>
<hr class="hr border-surface-950-50" />
</div>
Vertical
Use vr for a vertical rule, which supports all above styles. Make sure to set the height.
Default → ← border-l-8 <div class="grid h-20 grid-cols-[1fr_auto_auto_auto_auto_1fr] items-center gap-4">
<span><code class="code">Default</code> →</span>
<span class="vr"></span>
<span class="vr border-l-2"></span>
<span class="vr border-l-4"></span>
<span class="vr border-l-8"></span>
<span>← <code class="code">border-l-8</code></span>
</div>