Skip to content

BorderBox

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

Default example

This is a 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 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'gray.2' (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.
Edit this page on GitHub
3 contributorsBinaryMusedcastilemplums
Last edited by BinaryMuse on April 16, 2020