Border Colour utility classes

Border Colour utility classes to change any components border colour property.

Usage

Place the border colour utility class on an element that you want to change the border colour property for.

Adding -hover to any of the below modifiers will change the colour on the hover state only, for example slb-border-black-hover.

Each border colour has a breakpoint variation of small, medium, large, extra large, this is used to remove or change the border colour at different breakpoints, e.g. slb-border-blue slb-border-md-blue-alt will display border blue for screens up to the medium breakpoint and blue alt for screen sizes above the medium breakpoint.

Adding slb-border-inherit will inherit the value from its parent element. This is useful when nesting icons, text, buttons, etc.

Modifier selectors