New features
Custom border style
With the addition of borderStyle prop to Box, you can define custom border style for rendering borders.
<Box
borderStyle={{
topLeft: '↘',
top: '↓',
topRight: '↙',
left: '→',
bottomLeft: '↗',
bottom: '↑',
bottomRight: '↖',
right: '←'
}}
>
<Text>Content</Text>
</Box>
Individual colors for each border side
Box has supported borderColor prop for a while now to change the color of the border. In this release, there are new borderTopColor, borderBottomColor, borderLeftColor and borderRightColor props to change the color for each border side individually.
<Box
borderStyle="single"
borderTopColor="magenta"
borderBottomColor="green"
borderLeftColor="yellow"
borderRightColor="cyan"
>
<Text>So colorful</Text>
</Box>
Toggle visibility of individual border sides
As you can see, this is a pretty border-themed release. Continuing with the trend, now you toggle visibility of any border side individually via borderTop, borderBottom, borderLeft and borderRight props.
For example, if you wanted to hide top and bottom borders, you'd pass false to borderTop and borderBottom props respectively.
<Box
borderStyle="single"
borderTop={false}
borderBottom={false}
>
<Text>Content</Text>
</Box>