Borders
Placer Toolkit’s border system is defined by CSS custom properties, helping you apply consistent and predictable strokes, outlines and separators throughout your project.
Border style#
Border style controls the standard line shape of borders throughout Placer Toolkit.
| Custom property | Default value | Preview |
|---|---|---|
--pc-border-style | solid |
Border width#
Border widths use rem units to scale proportionately with the root font size.
| Custom property | Default value | Preview |
|---|---|---|
--pc-border-width-s | 0.0625rem (1 px) | |
--pc-border-width-m | 0.125rem (2 px) | |
--pc-border-width-l | 0.1875rem (3 px) | |
--pc-border-width-xl | 0.25rem (4 px) |
To scale all borders at once, you can use the --pc-border-width-scale property which specifies a multiplier on border-width. Values under 1 make all borders uniformly thinner, while values over 1 make them thicker.
Border radius#
Border radius controls the corners of Placer Toolkit components.
Common border radius properties allow you to achieve shapes beyond your theme’s preferred corner styles.
| Custom property | Default value | Preview |
|---|---|---|
--pc-border-radius-square | 0px | |
--pc-border-radius-pill | 9999px | |
--pc-border-radius-circle | 50% |
Size‐based border radius properties allow you to customise the overall roundness of Placer Toolkit components. They use rem units in order to scale proportionately with the root font size.
| Custom property | Default value | Preview |
|---|---|---|
--pc-border-radius-s | 0.25rem (4 px) | |
--pc-border-radius-m | 0.5rem (8 px) | |
--pc-border-radius-l | 0.75rem (12 px) | |
--pc-border-radius-xl | 1rem (16 px) |
To scale all border radii at once, you can use the --pc-border-radius-scale property, which specifies a multiplier on border-radius. Values under 1 make corners sharper, while values over 1 make them more rounded.