Border Style

Atomic props for controlling the style of an element's borders.

Atomic Props	CSS Properties
borderSolid	border-style: solid;
borderDashed	border-style: dashed;
borderDotted	border-style: dotted;
borderDouble	border-style: double;
borderNone	border-style: none;

Usage

Use border{style} props to control an element's border style.

Result

Loading...

Live Editor

<Box toEvenly> <Box toCenter p4 bgOrange200 border-4 borderOrange500 borderSolid> borderSolid </Box> <Box toCenter p4 bgOrange200 borderTop-4 borderOrange500 borderDashed> borderDashed </Box> <Box toCenter p4 bgOrange200 borderRight-4 borderOrange500 borderDotted> borderDotted </Box> <Box toCenter p4 bgOrange200 borderBottom-4 borderOrange500 borderDouble> borderDouble </Box> <Box toCenter p4 bgOrange200 border-4 borderOrange500 borderNone> borderNone </Box> </Box>

<Box toEvenly>
  <Box toCenter p4 bgOrange200 border-4 borderOrange500 borderSolid>
    borderSolid
  </Box>
  <Box toCenter p4 bgOrange200 borderTop-4 borderOrange500 borderDashed>
    borderDashed
  </Box>
  <Box toCenter p4 bgOrange200 borderRight-4 borderOrange500 borderDotted>
    borderDotted
  </Box>
  <Box toCenter p4 bgOrange200 borderBottom-4 borderOrange500 borderDouble>
    borderDouble
  </Box>
  <Box toCenter p4 bgOrange200 border-4 borderOrange500 borderNone>
    borderNone
  </Box>
</Box>