Borders

Utilities for controlling border width, style, color, radius, ring outlines, and dividers between child elements.

Border Width

Class	CSS Property
`border-0`	border-width: var(--border-width-0)
`border`	border-width: var(--border-width)
`border-2`	border-width: var(--border-width-2)
`border-t`	border-top-width: var(--border-width)
`border-b`	border-bottom-width: var(--border-width)

Border Style

Class	CSS Property
`border-solid`	border-style: solid
`border-dashed`	border-style: dashed
`border-none`	border-style: none

Border Color

Class	CSS Property
`border-transparent`	border-color: transparent
`border-current`	border-color: currentColor
`border-gray-200`	border-color: var(--color-gray-200)
`border-gray-300`	border-color: var(--color-gray-300)
`border-blue-500`	border-color: var(--color-blue-500)

Example

border-gray-200

border-2 border-blue-500

border-dashed

<div class="border border-gray-200 rounded p-4">Default border</div>
<div class="border-2 border-blue-500 rounded p-4">Thick blue border</div>
<div class="border-2 border-dashed border-gray-300 rounded p-4">Dashed border</div>

Border Radius

Class	CSS Property
`rounded-none`	border-radius: var(--radius-none)
`rounded-sm`	border-radius: var(--radius-sm)
`rounded`	border-radius: var(--radius)
`rounded-md`	border-radius: var(--radius-md)
`rounded-lg`	border-radius: var(--radius-lg)
`rounded-xl`	border-radius: var(--radius-xl)
`rounded-2xl`	border-radius: var(--radius-2xl)
`rounded-full`	border-radius: var(--radius-full)

Example

none

default

2xl

full

<div class="bg-blue-500 rounded-none">...</div>
<div class="bg-blue-500 rounded-lg">...</div>
<div class="bg-blue-500 rounded-full">...</div>

Ring

Ring utilities add box-shadow outlines, useful for focus states.

Class	CSS Property
`ring-0`	box-shadow: 0 0 0 0px var(--ring-color)
`ring-1`	box-shadow: 0 0 0 1px var(--ring-color)
`ring-2`	box-shadow: 0 0 0 2px var(--ring-color)
`ring-blue-500`	--ring-color: var(--color-blue-500)

Example

ring-1

ring-2

<div class="ring-2 ring-blue-500 rounded-lg p-4">
  Ring outline
</div>

Divide

Add borders between child elements.

Class	CSS Property
`divide-y`	> * + * { border-top-width: 1px }
`divide-x`	> * + * { border-left-width: 1px }

Example

First item

Second item

Third item

<div class="divide-y">
  <div class="py-3">First item</div>
  <div class="py-3">Second item</div>
  <div class="py-3">Third item</div>
</div>