# Borders

**Full documentation:** https://webawesome.com/docs/tokens/borders

Design Tokens Borders

Border tokens define the edges and corners of Web Awesome components. They use `rem` units so they scale with root font size. You can adjust individual tokens or use scale multipliers to change all widths or radii at once.

## Border Style

Link to This Section

A single style token controls the line type used for all component borders throughout the library.

| Custom Property | Description |
| --- | --- |
| \`--wa-border-style\` | Standard border line style used across all components |

## Border Width

Link to This Section

Border width tokens use `rem` units and are scaled by `--wa-border-width-scale`. Values below `1` make all borders thinner; values above `1` make them thicker.

| Custom Property | Description |
| --- | --- |
| \`--wa-border-width-scale\` | Global multiplier for all border width calculations |
| \`--wa-border-width-s\` | Thin border, used for most component outlines |
| \`--wa-border-width-m\` | Medium border, used for emphasized borders |
| \`--wa-border-width-l\` | Thick border, used for prominent outlines |

## Border Radius

Link to This Section

Border radius tokens control the corner rounding of components. Size-based tokens use `rem` units and scale with `--wa-border-radius-scale`. Values below `1` make corners sharper; values above `1` make them rounder. Shape tokens provide fixed shapes regardless of the scale.

| Custom Property | Description |
| --- | --- |
| \`--wa-border-radius-scale\` | Global multiplier for all border radius calculations |
| \`--wa-border-radius-s\` | Small corner rounding, for compact components like badges and checkboxes |
| \`--wa-border-radius-m\` | Medium corner rounding, the default for most inputs and buttons |
| \`--wa-border-radius-l\` | Large corner rounding, for cards and panels |
| \`--wa-border-radius-pill\` | Fully rounded ends, creating a pill shape regardless of element size |
| \`--wa-border-radius-circle\` | Perfectly circular shape; element must have a 1:1 aspect ratio |
| \`--wa-border-radius-square\` | No corner rounding; sharp, square corners |