Borders

Border

When set, all borders default to a 1px width which can be offset using border--width-{ i }.

Class

ClassResult
border

Set border.

no-border

Remove border.

border-x

Set x-axis borders (left and right).

border-y

Set y-axis borders (top and bottom).

border-t

Set top border.

border-b

Set bottom border.

border-r

Set right border.

border-l

Set left border.

border--width-{ 1-5 }

Set custom border width.

border--color-{ color }

Set border color.

Visualizer

Try this!See how to use the border utilities!

Example Card
Example Card
Example Card

Border Radius

You can add a border radius utility to any element.

Class

ClassResult
rounded-0

border-radius: 0

rounded-1

border-radius: .25rem

rounded-2

border-radius: .5rem

rounded-3

border-radius: 1rem

rounded-4

border-radius: 2rem

rounded-5

border-radius: 3rem

rounded-6

border-radius: 4.5rem

rounded-7

border-radius: 6.5rem

Visualizer

Try this!Change the border-radius of the card

Example Card

Specific Corners

You can specify a border-radius on a certain corner of an element. Just be sure to add the corner you want. It looks like this: rounded-tr--2. This would add border-top-right-radius: .5rem.