Border Color

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

Atomic Props	CSS Properties
border{colorName}	border-color: {color};

Usage

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

Result

Loading...

Live Editor

<Box toEvenly> <Box toCenter p4 border-2 borderPurple500> borderPurple500 </Box> <Box toCenter p4 border-2 borderTeal500> borderTeal500 </Box> <Box toCenter p4 border-2 borderCyan500> borderCyan500 </Box> <Box toCenter p4 border-2 borderOrange500> borderOrange500 </Box> </Box>

<Box toEvenly>
  <Box toCenter p4 border-2 borderPurple500>
    borderPurple500
  </Box>
  <Box toCenter p4 border-2 borderTeal500>
    borderTeal500
  </Box>
  <Box toCenter p4 border-2 borderCyan500>
    borderCyan500
  </Box>
  <Box toCenter p4 border-2 borderOrange500>
    borderOrange500
  </Box>
</Box>

Border opacity

Use --T{0-100} postfix to control an element's border color opacity.

Result

Loading...

Live Editor

<Box toEvenly> <Box toCenter p4 border-2 borderPurple500--T20> borderPurple500--T40 </Box> <Box toCenter p4 border-2 borderTeal500--T40> borderTeal500--T60 </Box> <Box toCenter p4 border-2 borderCyan500--T60> borderCyan500--T60 </Box> <Box toCenter p4 border-2 borderOrange500--T80> borderOrange500--T80 </Box> </Box>

<Box toEvenly>
  <Box toCenter p4 border-2 borderPurple500--T20>
    borderPurple500--T40
  </Box>
  <Box toCenter p4 border-2 borderTeal500--T40>
    borderTeal500--T60
  </Box>
  <Box toCenter p4 border-2 borderCyan500--T60>
    borderCyan500--T60
  </Box>
  <Box toCenter p4 border-2 borderOrange500--T80>
    borderOrange500--T80
  </Box>
</Box>