Border colour

The border colour class sets the border-colour property. It controls the colour of an element’s border.

Overview

b-default

border-color: #7d828b;

b-current

border-color: currentColor;

b-dark

border-color: #000000;

b-inherit

border-color: inherit;

b-light

border-color: #ffffff;

b-transparent

border-color: transparent;

Examples

Default
b-default

<p class="b-sm b-default">
  This element has the default border colour.
</p>

Current
b-current

<p class="b-sm b-current" style="color: var(--gcds-color-blue-750)">
  This element has a border colour based on the current colour.
</p>

Dark
b-dark

<p class="b-sm b-dark">
  This element has a dark border colour.
</p>

Inherit
b-inherit

<div style="border-color: var(--gcds-danger-border)">
  <p class="b-sm b-inherit">
    This element inherits the border colour of the parent.
  </p>
</div>

Light
b-light

<div class="bg-dark text-light">
  <p class="b-sm b-light">
    This element has a light border colour.
  </p>
</div>

Transparent
b-transparent

<p class="b-sm b-transparent">
  This element has a transparent border colour.
</p>

Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:

• xs: > 480px
• sm: > 640px
• md: > 768px
• lg: > 1024px
• xl: > 1280px

  
<div class="xs:b-default ...">
  ...
</div>
  

Learn more about the responsive layout prefix.

Apply this style to specific states Use a state prefix to apply this class only to a specified interaction state. The available states are:

• hover
• focus

  
<div class="hover:b-default ...">
  ...
</div>
  

Learn more about the state prefix.