Get startedFoundationsComponentsTemplatesBlocksAIStories
Browse Foundations

Foundations

Design tokensOverviewToken architectureToken namingBorderOverviewRadiusWidthColourOverviewBrand colourPrimitive colourSemantic colourElevationOverviewEdge elevationSurface elevationIconographyOverviewIcon sizeIcon libraryLayerOverviewZ-indexLayoutOverviewResponsive gridBreakpointMotionOverviewSpacingOverviewSpacer scaleGapPaddingMarginTypographyOverviewText stylesDisplayHeadingsSubtitlesParagraph bodyCaptionsLabelsLinksListsOverlineType systemFont familyFont sizeFont weightLetter spacingLine heightParagraph spacingText decorationText transform

Border width

Border width utilities for controlling thickness and visible sides in SGDS layouts and components.

Border width utilities

Border width utilities define thickness and which sides are visible. Prefer SGDS components like <sgds-divider> for separators between content sections instead of simulating them with border utilities.

SGDS tailwind tokenAppliesUsagePreview
sgds:bordersgds:border-default
1px all sidesDefault structural border for cards, panels, and custom containers.
sgds:border-2sgds:border-emphasis
2px all sidesUse when the border itself needs more presence, such as selected or focus-adjacent states.
sgds:border-b-4sgds:border-default
4px bottom onlyStrong directional border for tabs and anchored section treatments.
sgds:border-xsgds:border-muted
1px left + rightGood for grouped content areas where only the side edges should be visible.
sgds:border-l-4sgds:border-primary-default
4px left onlyUseful for callouts and semantic accents without framing the full container.

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2