Border Color

Use border-{color}-{shade} utilities like border-indigo-500 to set the border color of an element. Colors follow the Tailwind v4 default palette, plus the standalone border-black, border-white, and border-transparent.

Style('border-4 border-indigo-500 ...')
Style('border-4 border-purple-500 ...')
Style('border-4 border-sky-500 ...')

Changing the opacity

Append /N (a percentage 0–100) to any color utility to adjust opacity:

Style('border-4 border-indigo-500/100 ...')
Style('border-4 border-indigo-500/75 ...')
Style('border-4 border-indigo-500/50 ...')

Individual sides

Use utilities like border-t-indigo-500 and border-r-lime-100 to set the border color for one side of an element:

Style('border-4 border-indigo-200 border-t-indigo-500 ...')
Style('border-4 border-indigo-200 border-r-indigo-500 ...')
Style('border-4 border-indigo-200 border-b-indigo-500 ...')
Style('border-4 border-indigo-200 border-l-indigo-500 ...')

Horizontal and vertical sides

Use utilities like border-x-indigo-500 and border-y-lime-100 to set the border color on two sides at the same time:

Style('border-4 border-indigo-200 border-x-indigo-500 ...')
Style('border-4 border-indigo-200 border-y-indigo-500 ...')

Using logical properties

Use border-s-{color} and border-e-{color} to set the inline-start and inline-end colors. They map to left/right based on the active Directionality:

Directionality(
  textDirection: TextDirection.ltr,
  child: Style('border-s-indigo-500 ...'),
)
Directionality(
  textDirection: TextDirection.rtl,
  child: Style('border-s-indigo-500 ...'),
)

Applying on focus

Use the focus: modifier to swap the border color when the field receives focus:

Style('border-2 border-gray-700 focus:border-pink-600 ...')

Class reference

Class	Description
border-{color}-{shade}	Set border to a palette color (e.g. border-blue-500).
border-{color}-{shade}/{N}	Set border with N% opacity.
border-{t,r,b,l}-{color}	Per-side border color.
border-{x,y}-{color}	Set color on the matching axis (left+right or top+bottom).
border-{s,e}-{color}	Inline-start / inline-end logical color (resolved via Directionality).
border-black / border-white / border-transparent	Standalone keyword colors.
hover:border-{color} / focus:border-{color}	Apply on the matching interactive state.