GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Border colour

The border colour class sets the border-colour property. It controls the colour of an element’s border. Overview
CSS Shortcut class Applied style 
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

This element has the default border colour. 

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

Current
b-current

This element has a border colour based on the current colour. 

<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

This element has a dark border colour. 

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

Inherit
b-inherit

This element inherits the border colour of the parent. 

<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

This element has a light border colour. 

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

Transparent
b-transparent

This element has a transparent border colour. 

<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. 2025-10-01