Atomic props for controlling the style of an element's borders.
| Atomic Props | CSS Properties |
|---|
| border-{value} | border-width: {value}; |
| border{Top,Right,Bottom,Left}-{value} | border-{side}-width: {value}; |
All sides
Use border-{value} props to set the border width for all sides of an element.
<Box toEvenly>
<Box toCenter p4 bgOrange200 border-0 borderOrange500>
border-0
</Box>
<Box toCenter p4 bgOrange200 border borderOrange500>
border
</Box>
<Box toCenter p4 bgOrange200 border-2 borderOrange500>
border-2
</Box>
<Box toCenter p4 bgOrange200 border-4 borderOrange500>
border-4
</Box>
<Box toCenter p4 bgOrange200 border-8 borderOrange500>
border-8
</Box>
</Box>
Single side
Use border{Top,Right,Bottom,Left}-{value} props to set the border width for one side of an element.
<Box toEvenly>
<Box toCenter p4 bgOrange200 borderTop-2 borderOrange500>
borderTop-2
</Box>
<Box toCenter p4 bgOrange200 borderRight-2 borderOrange500>
borderRight-2
</Box>
<Box toCenter p4 bgOrange200 borderBottom-2 borderOrange500>
borderBottom-2
</Box>
<Box toCenter p4 bgOrange200 borderLeft-2 borderOrange500>
borderLeft-2
</Box>
</Box>