Border Props

Border props control borders, border radius, and other border-related properties.

Available Props

Prop	CSS Property	Theme Key
border	border	borders
borderWidth	border-width	borderWidths
borderStyle	border-style	borderStyles
borderColor	border-color	colors
borderRadius	border-radius	radii
borderTop	border-top	borders
borderRight	border-right	borders
borderBottom	border-bottom	borders
borderLeft	border-left	borders

Theme Scales

{
  borders: {
    none: 'none',
    thin: '1px solid',
    medium: '2px solid',
    thick: '4px solid',
  },
  borderWidths: {
    thin: '1px',
    medium: '2px',
    thick: '4px',
  },
  radii: {
    none: '0',
    sm: '0.125rem',
    md: '0.375rem',
    lg: '0.5rem',
    xl: '0.75rem',
    full: '9999px',
  },
}

Usage

<Box
  border="thin"
  borderColor="primary"
  borderRadius="md"
/>

// Individual borders
<Box
  borderTop="thick"
  borderTopColor="secondary"
  borderRadius="lg"
/>