Border Radius & Width

Border Radius & Width

Border width

border-<n> sets border width (default border color is the current text color in v4):

<div class="border border-gray-300">...</div>
<div class="border-2">...</div>
<div class="border-4">...</div>

• border = 1px, border-0, border-2, border-4, border-8.
• Per side: border-t-2, border-b-2, border-l-2, border-r-2.
• border-x-2, border-y-2.

Border color

border-<color>-<shade>:

<div class="border-2 border-sky-500">...</div>

• Opacity: border-sky-500/50.
• Arbitrary: border-[#316ff6].

Border radius

Per corner: rounded-t-lg, rounded-b-lg, rounded-l-lg, rounded-r-lg, rounded-tl-lg, rounded-tr-lg, rounded-bl-lg, rounded-br-lg.

<img class="rounded-full" src="..." alt="Avatar" />

Border style

border-solid (default), border-dashed, border-dotted, border-double, border-hidden, border-none.

TL;DR

• border, border-2, border-4 set width.
• border-gray-300 colors borders.
• rounded-lg, rounded-full round corners.
• Per-side widths and per-corner radii exist.