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 width

The border width class sets the border-width property. It controls the width of an element’s border. Logical properties adapt to the writing mode and text direction. Instead of literal directions like "left", "right", "top", or "bottom", they use flow-relative terms.This flexibility prepares layouts for internationalization without needing manual adjustments for different text directions. Overview The class value can be set to one of the following:
  • 0
  • sm (0.0625rem)
  • md (0.125rem)
  • lg (0.25rem)
  • xl (0.375rem)
CSS Shortcut class Applied style 
b-<value>
 
border: <value> solid currentColor;
 
bt-<value>
 
border-block-start: <value> solid currentColor;
 
bb-<value>
 
border-block-end: <value> solid currentColor;
 
be-<value>
 
border-inline-end: <value> solid currentColor;
 
bs-<value>
 
border-inline-start: <value> solid currentColor;
 
bx-<value>
 
border-inline: <value> solid currentColor;
 
by-<value>
 
border-block: <value> solid currentColor;

Examples

All side
b-<value>

This element has a border width of 0 on all sides.

<p class="b-0">
  This element has a border width of 0 on all sides.
</p>

Top side
bt-<value>

This element has a small border on the top side.

<p class="bt-sm">
  This element has a small border on the top side.
</p>

Bottom side
bb-<value>

This element has a medium border on the bottom side.

<p class="bb-md">
  This element has a medium border on the bottom side.
</p>

Right side
be-<value>

This element has a large border on the right side.

<p class="be-lg">
  This element has a large border on the right side.
</p>

Left side
bs-<value>

This element has an extra large border on the left side.

<p class="bs-xl">
  This element has an extra large border on the left side.
</p>

Horizontal sides
bx-<value>

This element has a small border on the left and right sides. 

<p class="bx-sm">
  This element has a small border on the left and right
  sides.
</p>

Vertical sides
by-<value>

This element has a large border on the top and bottom sides. 

<p class="by-lg">
  This element has a large border on the top and bottom
  sides.
</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-sm ...">
  ...
</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-sm ...">
  ...
</div>
Learn more about the state prefix. 2025-10-01