BorderBox

Deprecated
Review pending by accessibility team

On this page

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>

<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

Prop name	Type	Default	Description
borderWidth	String	'1px'	Sets the border, use theme values or provide your own.
borderStyle	String	'solid'	Sets the border style, use theme values or provide your own.
borderColor	String	'border.primary' (from theme)	Sets the border color, use theme values or provide your own.
borderRadius	String or Number	2 (from theme)	Sets the border radius, use theme values or provide your own.
boxShadow	String		Sets box shadow, use theme values or provide your own.

Edit this page on GitHub

3 contributors

Last edited by mperrotti on March 16, 2022