Yoga - System - Border

border

import { borders } from '@gympass/yoga-system';

const Square = styled.div`
  width: 100px;
  height: 50px;

  ${borders}
`;

render(() => {
  return <Square b="small" />;
});const Square = styled.div`
  width: 100px;
  height: 50px;

  ${borders}
`;

render(() => {
  return <Square b="small" />;
});

The borders module has all the listed above

Module	Prop	CSS Property
`border`	`border`, `b`	`border`
`borderTop`	`borderTop`, `bt`	`border-top`
`borderRight`	`borderRight`, `br`	`border-right`
`borderBottom`	`borderBottom`, `bb`	`border-bottom`
`borderLeft`	`borderLeft`, `bl`	`border-left`
`borderColor`	`borderColor`, `bc`	`border-color`
`borderTopColor`	`borderTopColor`, `btc`	`border-top-color`
`borderRightColor`	`borderRightColor`, `brc`	`border-right-color`
`borderBottomColor`	`borderBottompColor`, `bbc`	`border-bottom-color`
`borderLeftColor`	`borderTLeftColor`, `blc`	`border-left-color`
`borderWidth`	`borderWidth`, `bw`	`border-width`
`borderTopWidth`	`borderTopWidth`, `btw`	`border-top-width`
`borderRightWidth`	`borderRightWidth`, `brw`	`border-right-width`
`borderBottomWidth`	`borderBottomWidth`, `bbw`	`border-bottom-width`
`borderLeftWidth`	`borderLeftWidth`, `blw`	`border-left-width`
`borderRadius`	`borderRadius`, `bRadius`	`border-radius`
`borderTopLeftRadius`	`borderTopLeftRadius`, `btlr`	`border-top-left-radius`
`borderTopRightRadius`	`borderTopRightRadius`, `btrr`	`border-top-right-radius`
`borderBottomLeftRadius`	`borderBottomLeftRadius`, `bblr`	`border-bottom-left-radius`
`borderBottomRightRadius`	`borderBottomRightRadius`, `bbrr`	`border-bottom-right-radius`