sassyons/docs/borders.md

Inspired by Tachyons

# Border Styles

| Class | Properties |
| ----- | ---------- |
| ba-1px | border: 1px solid |
| bt-1px | border-top: 1px solid |
| br-1px | border-right: 1px solid |
| bb-1px | border-bottom: 1px solid |
| bl-1px | border-left: 1px solid |
| ba-0 | border: none |
| bt-0 | border-top: none |
| br-0 | border-right: none |
| bb-0 | border-bottom: none |
| bl-0 | border-left: none |

# Border Radius Styles

The following numbers in pixels can be used to select a border radius:
* 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64
* Example - the `radius16` class name will produce `border-radius: 16px`


| Class | Properties |
| ----- | ---------- |
| radius⟨num⟩ | border-radius: ⟨num⟩px |


The following directions can be added to a class name to target the specific corner for a radius:
* Example - the `radius16-br` class name will produce `border-bottom-right-radius: 16px`


| Direction | Property Adjustment |
| --------- | ------------------- |
| tl | top-left-radius |
| tr | top-right-radius |
| bl | bottom-left-radius |
| br | bottom-right-radius |


| Class | Properties |
| ----- | ---------- |
| radius⟨num⟩-tl | border-top-left-radius: ⟨num⟩px |
| radius⟨num⟩-tr | border-top-right-radius: ⟨num⟩px |
| radius⟨num⟩-bl | border-bottom-left-radius: ⟨num⟩px |
| radius⟨num⟩-br | border-bottom-right-radius: ⟨num⟩px |