Borders

Borders

Border Radius

brad is the shorthand we chose for border-radius and originally our design system just used a couple of values -2 for 2px and -4 for -4px buttttt looking in the Tachyons search it looks like this has expanded to include a rogue 11 and some sizes like md/lg etc.

tr tl modifiers for top-right top-left respectively too


Borders

  • b main shorthand for border with some modifiers:
  • c color (e.g. bc-gray)
  • w width (e.g. bw-thick )

directions can also be modifiers:

  • bb border bottom
  • br border right
  • bt border top
  • bl border left
  • bh border horizontal

so can hover states:

  • -hover applies the border rule on hover (so bt-hover applies the same rules as bt but only on hover)