This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Border width

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

Border width

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 token

Applies

Usage

Preview

sgds:border sgds:border-default

1px all sides

Default structural border for cards, panels, and custom containers.

sgds:border-2 sgds:border-emphasis

2px all sides

Use when the border itself needs more presence, such as selected or focus-adjacent states.

sgds:border-b-4 sgds:border-default

4px bottom only

Strong directional border for tabs and anchored section treatments.

sgds:border-x sgds:border-muted

1px left + right

Good for grouped content areas where only the side edges should be visible.

sgds:border-l-4 sgds:border-primary-default

4px left only

Useful 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.