The Placer Toolkit alpha has
arrived! 🎉
Plenty of changes are coming your
way—some big, some breaking, some
even nuclear! Beware the changelog…
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.