Closeclose

Border

Border includes a scale for width and radius, both built in increments and used to create consistent border styling throughout the system.

Width

border-width/100

1px

Sample

border-width/200

2px

Sample

border-width/300

3px

Sample

border-width/400

4px

Sample

border-width/500

6px

Sample

border-width/600

8px

Sample

border-width/700

12px

Sample

border-width/800

16px

Sample

Radius

border-radius/100

2px

Sample

border-radius/200

4px

Sample

border-radius/300

6px

Sample

border-radius/400

8px

Sample

border-radius/500

12px

Sample

border-radius/600

16px

Sample

border-radius/full

9999px

Sample