Borders

Style Jump to heading

Border style controls the standard line shape of borders throughout Web Awesome.

Width Jump to heading

Border widths use rem units in order to scale proportionately with the root font size.

To scale all borders at once, you can use the --wa-border-width-scale property which specifies a multiplier on border-width. Values < 1 make all borders uniformly thinner, while values > 1 make them thicker.

Radius Jump to heading

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.

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.

To scale all border radii at once, you can use the --wa-border-radius-scale property which specifies a multiplier on border-radius. Values < 1 make corners sharper, while values > 1 make them rounder.