Add borders

Borders can be added to containers using utilities. The color of the border is defined by the $qw-border-color token.

Remove borders

As a rule, it is better to use styles that are additive. However, there are occasions where styles must be overridden. To that end, border utilities can also be used to remove an existing border. Simply add -0 to the end of any border utility class name to remove the border, e.g. qw-border-left-0 removes an object's left-side border.

By breakpoint

A breakpoint class is constructed by appending the breakpoint and direction(optional) to the border class. Example: .qw-border-sm-top adds a border to the top of the element at the small breakpoint. Similarly, .qw-border-sm-top-0 removes the border from the top of the element at the small breakpoint.

Border utilities apply to all screen sizes, from xs to xl, unless they have a specified breakpoint assigned within them. Breakpoint utilities apply to the specified screensize and up.

Border radius

Apply rounded corners to an element with the border radius utility.

The border radius utility supports small, default, large, and circle radii. This sets the border-radius to 2px, 4px, 8px and 50%, respectively.

Note: For an object to have a circle radius, its height and width must be equal.

Directional border radius

Border radius can also be set for specific sides. This only supports one size of border radius, default (4px).