BorderBox

  • Deprecated
  • Not reviewed for accessibility

BorderBox is a Box component with a border. When no borderColor is present, the component defaults to a primary border.

Deprecation

Use Box instead.

Before

<BorderBox>Item 1</BorderBox>

After

<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
Item 1
</Box>

Default example

Note that BorderBox has default props set for borderWidth, borderStyle, and borderColor. This means that you cannot use border={0} borderBottom={1} or similar patterns; instead, use individual properties like borderWidth={0} borderBottomWidth={1}.

System props

BorderBox components get COMMON, LAYOUT, BORDER, and FLEX system props. Read our System Props doc page for a full list of available props.

Component props

Prop nameTypeDefaultDescription
borderWidthString'1px'Sets the border, use theme values or provide your own.
borderStyleString'solid'Sets the border style, use theme values or provide your own.
borderColorString'border.primary' (from theme)Sets the border color, use theme values or provide your own.
borderRadiusString or Number2 (from theme)Sets the border radius, use theme values or provide your own.
boxShadowStringSets box shadow, use theme values or provide your own.