Border & Border Radius

Utility classes for borders and border radius. Both use semantic design tokens and support responsive variants.

---

Border

All Sides

Class	CSS
border	border: 1px solid var(--color-border-light)
border-0	border: 0

<div class="flex gap-2">
  <div class="border rounded-md p-3 w-full">.border</div>
  <div class="border-0 p-3 w-full" style="background: var(--color-background-alt)">.border-0</div>
</div>

.border

.border-0

Individual Sides

Class	CSS
border-t	border-top: 1px solid var(--color-border-light)
border-b	border-bottom: 1px solid var(--color-border-light)
border-s	border-inline-start: 1px solid var(--color-border-light)
border-e	border-inline-end: 1px solid var(--color-border-light)

border-s and border-e use logical properties — they flip automatically in RTL layouts.

<div class="flex flex-col gap-2">
  <div class="border-t p-3 bg-alt">.border-t</div>
  <div class="border-b p-3 bg-alt">.border-b</div>
  <div class="border-s p-3 bg-alt">.border-s (inline-start)</div>
  <div class="border-e p-3 bg-alt">.border-e (inline-end)</div>
</div>

.border-t

.border-b

.border-s (inline-start)

.border-e (inline-end)

Border Colors

Apply to any element that already has a border:

Class	CSS variable
border-light	var(--color-border-light)
border-medium	var(--color-border-medium)
border-strong	var(--color-border-strong)
border-inverse	var(--color-border-inverse)

<div class="flex flex-col gap-2">
  <div class="border border-light p-3 rounded-sm">.border-light</div>
  <div class="border border-medium p-3 rounded-sm">.border-medium</div>
  <div class="border border-strong p-3 rounded-sm">.border-strong</div>
  <div class="border border-inverse p-3 rounded-sm" style="background: var(--color-text)">.border-inverse</div>
</div>

.border-light

.border-medium

.border-strong

.border-inverse

---

Border Radius

Class	CSS variable	Value
rounded-none	—	0
rounded-xs	var(--radius-xs)	0.125rem
rounded-sm	var(--radius-sm)	0.25rem
rounded-md	var(--radius-md)	0.375rem
rounded-lg	var(--radius-lg)	0.5rem
rounded-xl	var(--radius-xl)	0.75rem
rounded-2xl	var(--radius-2xl)	1rem
rounded-3xl	var(--radius-3xl)	1.5rem
rounded-full	var(--radius-full)	9999px

<div class="flex flex-wrap gap-2">
  <div class="border p-3 rounded-none" style="width: 80px; text-align: center">none</div>
  <div class="border p-3 rounded-xs" style="width: 80px; text-align: center">xs</div>
  <div class="border p-3 rounded-sm" style="width: 80px; text-align: center">sm</div>
  <div class="border p-3 rounded-md" style="width: 80px; text-align: center">md</div>
  <div class="border p-3 rounded-lg" style="width: 80px; text-align: center">lg</div>
  <div class="border p-3 rounded-xl" style="width: 80px; text-align: center">xl</div>
  <div class="border p-3 rounded-2xl" style="width: 80px; text-align: center">2xl</div>
  <div class="border p-3 rounded-3xl" style="width: 80px; text-align: center">3xl</div>
  <div class="border p-3 rounded-full" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center">full</div>
</div>

none

xs

sm

md

lg

xl

2xl

3xl

full

Combined Example

<div class="border border-strong rounded-lg p-3">
  <div class="border-b border-light p-2">Item 1</div>
  <div class="border-b border-light p-2">Item 2</div>
  <div class="p-2">Item 3</div>
</div>

Item 1

Item 2

Item 3

---

Responsive Variants

All border and radius classes support breakpoint prefixes: sm:, md:, lg:, xl:, 2xl:.

<!-- No border on mobile, border from md up -->
<div class="md:border md:rounded-lg">Responsive card</div>

<!-- Square on mobile, rounded from sm up -->
<img class="rounded-none sm:rounded-full" src="avatar.jpg" />

---

SCSS

@use '@grundtone/design-tokens/scss/lib' as gt;

.card {
  border: 1px solid gt.color('border-light');
  border-radius: gt.radius('md');
}