Borders

Width & style

Class	CSS
chai-border	border-width: 1px; border-style: solid
chai-border-2	border-width: 2px; border-style: solid
chai-border-4	border-width: 4px; border-style: solid
chai-border-t-1	border-top-width: 1px; border-top-style: solid
chai-border-r-2	border-right-width: 2px; border-right-style: solid
chai-border-b-3	border-bottom-width: 3px; border-bottom-style: solid
chai-border-l-1	border-left-width: 1px; border-left-style: solid
chai-border-solid	border-style: solid
chai-border-dashed	border-style: dashed
chai-border-dotted	border-style: dotted
chai-border-double	border-style: double
chai-border-none	border-style: none

Color

chai-border-{color} resolves to border-color. Width-pattern rules are matched first, so chai-border-2 is a width and chai-border-red-500 is a color — they don’t collide.

<div class="chai-border chai-border-saffron-300">…</div>
<div class="chai-border-2 chai-border-chai-700">…</div>
<div class="chai-border chai-border-[#aabbcc]">…</div>

Radius

Class	CSS
chai-rounded	border-radius: 4px
chai-rounded-none	border-radius: 0
chai-rounded-sm	border-radius: 2px
chai-rounded-md	border-radius: 6px
chai-rounded-lg	border-radius: 8px
chai-rounded-xl	border-radius: 12px
chai-rounded-2xl	border-radius: 16px
chai-rounded-3xl	border-radius: 24px
chai-rounded-full	border-radius: 9999px
chai-rounded-12	border-radius: 12px (numeric)
chai-rounded-[20px]	border-radius: 20px (arbitrary)

The named scale is themable — see The theme → radius.