Border style controls the standard line shape of borders throughout Web Awesome.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-border-style |
solid |
Border widths use rem units in order to scale proportionately with the root font size.
Each border width value uses a calc() function with --wa-border-width-multiplier to
scale all border widths at once. By default, this multiplier is 0.0625. The table below lists the
result of the calculation.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-border-width-s |
0.0625rem (1px) |
|
--wa-border-width-m |
0.125rem (2px) |
|
--wa-border-width-l |
0.1875rem (3px) |
Border radius controls the corners of Web Awesome components.
Common border radius properties allow you to achieve specific shapes beyond your theme's preferred corner styles.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-border-radius-pill |
9999px |
|
--wa-border-radius-circle |
50% |
|
--wa-border-radius-square |
0px |
Size-based border radius properties allow you to customize the overall roundness of Web Awesome components.
These use rem units in order to scale proportionately with the root font size.
Each property uses a calc() function with --wa-border-radius-multiplier to scale all
border radii at once. By default, this multiplier is 0.375. The table below lists the result of
the calculation.
| Custom Property | Default Value | Preview |
|---|---|---|
--wa-border-radius-xs |
0.1875rem (3px) |
|
--wa-border-radius-s |
0.375rem (6px) |
|
--wa-border-radius-m |
0.75rem (12px) |
|
--wa-border-radius-l |
1.125rem (18px) |