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

Border radius

Border radius utilities for applying SGDS corner treatments to surfaces and native form controls.

Border radius

SGDS has two radius scales: general radius utilities for components and surfaces, and form radius utilities for native HTML form elements. Use general tokens by default, and switch to sgds:rounded-form-* only for native form controls.

General radius

Form radius

SGDS tailwind token

Value

Usage

Preview

sgds:rounded-none

0px

Sharp corners for tables, strict layouts, and mechanical surfaces.

Square

sgds:rounded-xs

2px

Subtle rounding for small tags and restrained surface treatments.

Subtle

sgds:rounded-sm

4px

Default small-component radius.

Default

sgds:rounded-md

8px

Balanced radius for panels and medium surfaces.

Panel

sgds:rounded-lg

12px

Common for cards, menus, and larger surfaced components.

Card

sgds:rounded-xl

16px

Featured surfaces and softer emphasis blocks.

Feature

sgds:rounded-2-xl

24px

Large containers and more expressive panels.

Large

sgds:rounded-3-xl

32px

Hero and promotional surfaces with the softest corners.

Hero

sgds:rounded-full

999px

Pills, badges, avatars, and circular icon treatments.

Pill

Singapore Government Design System

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