BorderBox

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

<BorderBox>This is a BorderBox</BorderBox>

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