Get boba!
boba Version 1.7.2

Borders

A collection of classes to make styling your borders a breeze.

Styles

Classes to style your tags
Outline Styles
.border-dotted Use the .border-dotted class to add a dotted border to an element.
.border-dashed Use the .border-dashed class to add a dashed border to an element.
.border-thick Use the .border-thick class to add a thick border to an element.
.border-thin Use the .border-thin class to add a thin border to an element.
.border-transparent Use the .border-transparent class to make the border of an element transparent.
.border-none Use the .border-none class to remove the border from an element.

Colors

Easily change the border color of your elements using boba's eye-catching palette.
Colors
To change the border color of an element, add a .border-{COLOR} class.
.border-red Add this class to make the border of an element red.
.border-orange Add this class to make the border of an element orange.
.border-yellow Add this class to make the border of an element yellow.
.border-green Add this class to make the border of an element green.
.border-teal Add this class to make the border of an element teal.
.border-blue Add this class to make the border of an element blue.
.border-indigo Add this class to make the border of an element indigo.
.border-purple Add this class to make the border of an element purple.
.border-pink Add this class to make the border of an element pink.
.border-dark Add this class to make the border of an element dark.
.border-light Add this class to make the border of an element light.
.border-black Add this class to make the border of an element black.
.border-white Add this class to make the border of an element white.

Extended

Additional utilities to help you fine-tune your borders.

Compatibility

These classes are only included in the extended version of boba. Learn more.

Hover

For a more subtle effect, use the hover classes to change the border color of your element only when someone hovers/focuses on it.
Hover
To change the border color on hover, add a .border-hover-{COLOR} class.
.border-hover-red Add this class to make the border of an element red on hover.
.border-hover-orange Add this class to make the border of an element orange on hover.
.border-hover-yellow Add this class to make the border of an element yellow on hover.
.border-hover-green Add this class to make the border of an element green on hover.
.border-hover-teal Add this class to make the border of an element teal on hover.
.border-hover-blue Add this class to make the border of an element blue on hover.
.border-hover-indigo Add this class to make the border of an element indigo on hover.
.border-hover-purple Add this class to make the border of an element purple on hover.
.border-hover-pink Add this class to make the border of an element pink on hover.
.border-hover-dark Add this class to make the border of an element dark on hover.
.border-hover-light Add this class to make the border of an element light on hover.
.border-hover-black Add this class to make the border of an element black on hover.
.border-hover-white Add this class to make the border of an element white on hover.

Active

For an even more subtle effect, use the active classes to change the border color of your element only when someone someone clicks on it.
Active
To change the border color when clicked, add a .border-active-{COLOR} class.
.border-active-red Add this class to make the border of an element red when clicked.
.border-active-orange Add this class to make the border of an element orange when clicked.
.border-active-yellow Add this class to make the border of an element yellow when clicked.
.border-active-green Add this class to make the border of an element green when clicked.
.border-active-teal Add this class to make the border of an element teal when clicked.
.border-active-blue Add this class to make the border of an element blue when clicked.
.border-active-indigo Add this class to make the border of an element indigo when clicked.
.border-active-purple Add this class to make the border of an element purple when clicked.
.border-active-pink Add this class to make the border of an element pink when clicked.
.border-active-dark Add this class to make the border of an element dark when clicked.
.border-active-light Add this class to make the border of an element light when clicked.
.border-active-black Add this class to make the border of an element black when clicked.
.border-active-white Add this class to make the border of an element white when clicked.

Combinations

Combine the various border helper classes to create the perfect element coloring.
Red, Hover-Green, Active-Blue
<div class="border-red border-hover-green border-active-blue"> Red, Hover-Green, Active-Blue </div>

Shades

Even more utilities to help you create the perfect border color.

Compatibility

These classes are only included in the extended version of boba and only work with boba's core palette colors. Learn more.

Color Shades

Further fine-tune the color of your border by adjusting its shade.

Clarification

These classes must be used in conjunction with a .border-{COLOR} class.

Color Shades

To change the shade of your colored border, use the .lighten-border-{STEP} and .darken-border-{STEP} classes.
There are a total of 3 steps in either direction (i.e. a total of 7 shades are available per color).

.lighten-border-3 Add this class to make your border 3 shades lighter.
.lighten-border-2 Add this class to make your border 2 shades lighter.
.lighten-border-1 Add this class to make your border 1 shade lighter.
Base Color This is a default border using .border-red for reference.
.darken-border-1 Add this class to make your border 1 shade darker.
.darken-border-2 Add this class to make your border 2 shades darker.
.darken-border-3 Add this class to make your border 3 shades darker.

Hover Shades

Further fine-tune the color of your border on hover by adjusting its shade.

Clarification

These classes must be used in conjunction with a .border-hover-{COLOR} class.

Color Shades

To change the shade of your colored border on hover, use the .lighten-border-hover-{STEP} and .darken-border-hover-{STEP} classes.
There are a total of 3 steps in either direction (i.e. a total of 7 shades are available per color).

.lighten-border-hover-3 Add this class to make your border 3 shades lighter on hover.
.lighten-border-hover-2 Add this class to make your border 2 shades lighter on hover.
.lighten-border-hover-1 Add this class to make your border 1 shade lighter on hover.
Base Color This is a default border using .border-hover-red for reference.
.darken-border-hover-1 Add this class to make your border 1 shade darker on hover.
.darken-border-hover-2 Add this class to make your border 2 shades darker on hover.
.darken-border-hover-3 Add this class to make your border 3 shades darker on hover.

Active Shades

Further fine-tune the color of your border when clicked by adjusting its shade.

Clarification

These classes must be used in conjunction with a .border-active-{COLOR} class.

Color Shades

To change the shade of your colored border when clicked, use the .lighten-border-active-{STEP} and .darken-border-active-{STEP} classes.
There are a total of 3 steps in either direction (i.e. a total of 7 shades are available per color).

.lighten-border-active-3 Add this class to make your border 3 shades lighter when clicked.
.lighten-border-active-2 Add this class to make your border 2 shades lighter when clicked.
.lighten-border-active-1 Add this class to make your border 1 shade lighter when clicked.
Base Color This is a default border using .border-active-red for reference.
.darken-border-active-1 Add this class to make your border 1 shade darker when clicked.
.darken-border-active-2 Add this class to make your border 2 shades darker when clicked.
.darken-border-active-3 Add this class to make your border 3 shades darker when clicked.