Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

On this page

Boder

Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.

Additive

vue

Subtractive

vue

Color

Change the border color using utilities built on our theme colors.

vue

Width

vue

Radius

Add classes to an element to easily round its corners.

vue

Sizes

To make rounded corners larger or smaller, use the scaling class. Sizes range from 0 to 5 and can be set by changing the utility API.

vue

Extend

Extend color

blue
blue
100
blue
200
blue
300
blue
400
blue
500
blue
600
blue
700
blue
800
blue
900
indigo
indigo
100
indigo
200
indigo
300
indigo
400
indigo
500
indigo
600
indigo
700
indigo
800
indigo
900
purple
purple
100
purple
200
purple
300
purple
400
purple
500
purple
600
purple
700
purple
800
purple
900
pink
pink
100
pink
200
pink
300
pink
400
pink
500
pink
600
pink
700
pink
800
pink
900
red
red
100
red
200
red
300
red
400
red
500
red
600
red
700
red
800
red
900
orange
orange
100
orange
200
orange
300
orange
400
orange
500
orange
600
orange
700
orange
800
orange
900
yellow
yellow
100
yellow
200
yellow
300
yellow
400
yellow
500
yellow
600
yellow
700
yellow
800
yellow
900
green
green
100
green
200
green
300
green
400
green
500
green
600
green
700
green
800
green
900
teal
teal
100
teal
200
teal
300
teal
400
teal
500
teal
600
teal
700
teal
800
teal
900
cyan
cyan
100
cyan
200
cyan
300
cyan
400
cyan
500
cyan
600
cyan
700
cyan
800
cyan
900
On this page