Borders

Border Radius

sz prop	Tailwind class	Preview
{ rounded: 'sm' }	rounded-sm
{ rounded: 'md' }	rounded-md
{ rounded: 'lg' }	rounded-lg
{ rounded: 'xl' }	rounded-xl
{ rounded: 'full' }	rounded-full
{ rounded: 'none' }	rounded-none
{ roundedT: 'lg' }	rounded-t-lg
{ roundedB: 'lg' }	rounded-b-lg
{ roundedL: 'md' }	rounded-l-md
{ roundedR: 'md' }	rounded-r-md
{ roundedTl: 'lg' }	rounded-tl-lg
{ roundedTr: 'lg' }	rounded-tr-lg
{ rounded: '5px' }	rounded-[5px]

border radius scale — none, sm, md, lg, full

none

full

Border Width

sz prop	Tailwind class	Preview
{ border: true }	border
{ border: 0 }	border-0
{ border: 2 }	border-2
{ border: 4 }	border-4
{ borderX: 2 }	border-x-2
{ borderY: 1 }	border-y-1
{ borderT: 2 }	border-t-2
{ borderR: 2 }	border-r-2
{ borderB: 2 }	border-b-2
{ borderL: 4 }	border-l-4

border width — 1, 2, 4

1
2
4

Border Color

sz prop	Tailwind class
{ borderColor: 'gray-200' }	border-gray-200
{ borderColor: 'blue-500' }	border-blue-500
{ borderColor: 'transparent' }	border-transparent
{ borderColor: '--ds-border' }	border-(--ds-border)
{ borderTColor: 'red-500' }	border-t-red-500
{ borderBColor: 'blue-500' }	border-b-blue-500
{ borderColor: { color: 'red-500', op: 50 } }	border-red-500/50
{ borderColor: { color: '--ds-border', op: 50 } }	border-(--ds-border)/50

Border Style

sz prop	Tailwind class	Preview
{ borderStyle: 'solid' }	border-solid
{ borderStyle: 'dashed' }	border-dashed
{ borderStyle: 'dotted' }	border-dotted
{ borderStyle: 'double' }	border-double
{ borderStyle: 'none' }	border-none

border styles — solid, dashed, dotted

solid
dashed
dotted

Outline

sz prop	Tailwind class
{ outline: 'none' }	outline-none
{ outline: 2 }	outline-2
{ outlineColor: 'blue-500' }	outline-blue-500
{ outlineStyle: 'dashed' }	outline-dashed
{ outlineOffset: 2 }	outline-offset-2

Ring (Focus Ring)

sz prop	Tailwind class
{ ring: true }	ring
{ ring: 1 }	ring-1
{ ring: 2 }	ring-2
{ ring: 4 }	ring-4
{ ringColor: 'blue-500' }	ring-blue-500
{ ringOffset: 2 }	ring-offset-2
{ ringOffsetColor: 'white' }	ring-offset-white
{ insetRing: true }	inset-ring
{ insetRing: 1 }	inset-ring-1
{ insetRingColor: 'blue-500' }	inset-ring-blue-500

ring-2 with ring-offset-2

Divide (Between Children)

sz prop	Tailwind class
{ divideX: true }	divide-x
{ divideX: 2 }	divide-x-2
{ divideY: true }	divide-y
{ divideY: 2 }	divide-y-2
{ divideColor: 'gray-200' }	divide-gray-200
{ divideStyle: 'dashed' }	divide-dashed

{ divideY: true } — horizontal dividers between rows

Row one

Row two

Row three

Examples

// Card border
<div sz={{
  border: 1,
  borderColor: 'gray-200',
  rounded: 'lg',
  p: 6,
}} />

// Focus ring on button
<button sz={{
  focusVisible: {
    outline: 'none',
    ring: 2,
    ringColor: 'blue-500',
    ringOffset: 2,
  },
}} />

// Left accent border (callout style)
<div sz={{
  border: 1,
  borderL: '3px',
  borderColor: 'gray-200',
  borderLColor: 'blue-500',
  pl: 4,
  rounded: 'sm',
}} />

// Divider between list items
<ul sz={{ divideY: 1, divideColor: 'gray-100' }}>
  <li sz={{ py: 3 }}>Item 1</li>
  <li sz={{ py: 3 }}>Item 2</li>
</ul>