Borders & Shadows

Border can have easily changed color, side, alpha opacity, radius or width by adding its corresponding classes. The color palette is taken from material design colors.

Border add

.border
.border-top
.border-right
.border-bottom
.border-left

<div id="graph1"></div>

Border remove

.border-0
.border .border-top-0
.border .border-right-0
.border .border-bottom-0
.border .border-left-0

<div id="graph1"></div>

Bootstrap basic colors

.border .border-primary
.border .border-secondary
.border .border-success
.border .border-danger
.border .border-warning
.border .border-info
.border .border-light
.border .border-dark
.border .border-white

<div id="graph1"></div>

Border radius

.rounded
.rounded-top
.rounded-right
.rounded-bottom
.rounded-left
.rounded-circle
.rounded-pill
.rounded-0

<div id="graph1"></div>

Border radius

.rounded
.rounded-top
.rounded-right

<div id="graph1"></div>

Border colors

.red-border .border-lighter-5
.red-border .border-lighter-4
.red-border .border-lighter-3
.red-border .border-lighter-2
.red-border .border-lighter-1
.red-border
.red-border .border-darker-1
.red-border .border-darker-2
.red-border .border-darker-3
.red-border .border-darker-4
.red-border .border-alt-1
.red-border .border-alt-2
.red-border .border-alt-3
.red-border .border-alt-4
.pink-border .border-lighter-5
.pink-border .border-lighter-4
.pink-border .border-lighter-3
.pink-border .border-lighter-2
.pink-border .border-lighter-1
.pink-border
.pink-border .border-darker-1
.pink-border .border-darker-2
.pink-border .border-darker-3
.pink-border .border-darker-4
.pink-border .border-alt-1
.pink-border .border-alt-2
.pink-border .border-alt-3
.pink-border .border-alt-4
.purple-border .border-lighter-5
.purple-border .border-lighterr-4
. purple-border .border-lighterr-3
.purple-border .border-lighter-2
. purple-border .border-lighter-1
.purple-border
.purple-border .border-darker-1
.purple-border .border-darker-2
.purple-border .border-darker-3
.purple-border .border-darker-4
.purple-border .border-alt-1
.purple-border .border-alt-2
.purple-border .border-alt-3
.purple-border .border-alt-4
.deep-purple-border .border-lighter-5
.deep-purple-border .border-lighter-4
.deep-purple-border .border-lighter-3
.deep-purple-border .border-lighter-2
.deep-purple-border .border-lighter-1
.deep-purple-border
.deep-purple-border .border-darker-1
.deep-purple-border .border-darker-2
.deep-purple-border .border-darker-3
.deep-purple-border .border-darker-4
.deep-purple-border .border-alt-1
.deep-purple-border .border-alt-2
.deep-purple-border .border-alt-3
.deep-purple-border .border-alt-4
.indigo-border .border-lighter-5
.indigo-border .border-lighter-4
.indigo-border .border-lighter-3
.indigo-border .border-lighter-2
.indigo-border .border-lighter-1
.indigo-border
.indigo-border .border-darker-1
.indigo-border .border-darker-2
.indigo-border .border-darker-3
.indigo-border .border-darker-4
.indigo-border .border-alt-1
.indigo-border .border-alt-2
.indigo-border .border-alt-3
.indigo-border .border-alt-4
.blue-border .border-lighter-5
.blue-border .border-lighter-4
.blue-border .border-lighter-3
.blue-border .border-lighter-2
.blue-border .border-lighter-1
.blue-border
.blue-border .border-darker-1
.blue-border .border-darker-2
.blue-border .border-darker-3
.blue-border .border-darker-4
.blue-border .border-alt-1
.blue-border .border-alt-2
.blue-border .border-alt-3
.blue-border .border-alt-4
.light-blue-border .border-lighter-5
.light-blue-border .border-lighter-4
.light-blue-border .border-lighter-3
.light-blue-border .border-lighter-2
.light-blue-border .border-lighter-1
.light-blue-border
.light-blue-border .border-darker-1
.light-blue-border .border-darker-2
.light-blue-border .border-darker-3
.light-blue-border .border-darker-4
.light-blue-border .border-alt-1
.light-blue-border .border-alt-2
.light-blue-border .border-alt-3
.light-blue-border .border-alt-4
.cyan-border .border-lighter-5
.cyan-border .border-lighter-4
.cyan-border .border-lighter-3
.cyan-border .border-lighter-2
.cyan-border .border-lighter-1
.cyan-border
.cyan-border .border-darker-1
.cyan-border .border-darker-2
.cyan-border .border-darker-3
.cyan-border .border-darker-4
.cyan-border .border-alt-1
.cyan-border .border-alt-2
.cyan-border .border-alt-3
.cyan-border .border-alt-4
.teal-border .border-lighter-5
.teal-border .border-lighter-4
.teal-border .border-lighter-3
.teal-border .border-lighter-2
.teal-border .border-lighter-1
.teal-border
.teal-border .border-darker-1
.teal-border .border-darker-2
.teal-border .border-darker-3
.teal-border .border-darker-4
.teal-border .border-alt-1
.teal-border .border-alt-2
.teal-border .border-alt-3
.teal-border .border-alt-4
.green-border .border-lighter-5
.green-border .border-lighter-4
.green-border .border-lighter-3
.green-border .border-lighter-2
.green-border .border-lighter-1
.green-border
.green-border .border-darker-1
.green-border .border-darker-2
.green-border .border-darker-3
.green-border .border-darker-4
.green-border .border-alt-1
.green-border .border-alt-2
.green-border .border-alt-3
.green-border .border-alt-4
.light-green-border border-lighter-5
.light-green-border border-lighter-4
.light-green-border border-lighter-3
.light-green-border border-lighter-2
.light-green-border border-lighter-1
.light-green-border
.light-green-border .border-darker-1
.light-green-border .border-darker-2
.light-green-border .border-darker-3
.light-green-border .border-darker-4
.light-green-border .border-alt-1
.light-green-border .border-alt-2
.light-green-border .border-alt-3
.light-green-border .border-alt-4
.lime-border .border-lighter-5
.lime-border .border-lighter-4
.lime-border .border-lighter-3
.lime-border .border-lighter-2
.lime-border .border-lighter-1
.lime-border
.lime-border .border-darker-1
.lime-border .border-darker-2
.lime-border .border-darker-3
.lime-border .border-darker-4
.lime-border .border-alt-1
.lime-border .border-alt-2
.lime-border .border-alt-3
.lime-border .border-alt-4
.yellow-border .border-lighter-5
.yellow-border .border-lighter-4
.yellow-border .border-lighter-3
.yellow-border .border-lighter-2
.yellow-border .border-lighter-1
.yellow-border
.yellow-border .border-darker-1
.yellow-border .border-darker-2
.yellow-border .border-darker-3
.yellow-border .border-darker-4
.yellow-border .border-alt-1
.yellow-border .border-alt-2
.yellow-border .border-alt-3
.yellow-border .border-alt-4
.amber-border .border-lighter-5
.amber-border .border-lighter-4
.amber-border .border-lighter-3
.amber-border .border-lighter-2
.amber-border .border-lighter-1
.amber-border
.amber-border .border-darker-1
.amber-border .border-darker-2
.amber-border .border-darker-3
.amber-border .border-darker-4
.amber-border .border-alt-1
.amber-border .border-alt-2
.amber-border .border-alt-3
.amber-border .border-alt-4
.orange-border .border-lighter-5
.orange-border .border-lighter-4
.orange-border .border-lighter-3
.orange-border .border-lighter-2
.orange-border .border-lighter-1
.orange-border
.orange-border .border-darker-1
.orange-border .border-darker-2
.orange-border .border-darker-3
.orange-border .border-darker-4
.orange-border .border-alt-1
.orange-border .border-alt-2
.orange-border .border-alt-3
.orange-border .border-alt-4
.deep-orange-border .border-lighter-5
.deep-orange-border .border-lighter-4
.deep-orange-border .border-lighter-3
.deep-orange-border .border-lighter-2
.deep-orange-border .border-lighter-1
.deep-orange-border
.deep-orange-border .border-darker-1
.deep-orange-border .border-darker-2
.deep-orange-border .border-darker-3
.deep-orange-border .border-darker-4
.deep-orange-border .border-alt-1
.deep-orange-border .border-alt-2
.deep-orange-border .border-alt-3
.deep-orange-border .border-alt-4
.brown-border .border-lighter-5
.brown-border .border-lighter-4
.brown-border .border-lighter-3
.brown-border .border-lighter-2
.brown-border .border-lighter-1
.brown-border
.brown-border .border-darker-1
.brown-border .border-darker-2
.brown-border .border-darker-3
.brown-border .border-darker-4
.grey-border .border-lighter-5
.grey-border .border-lighter-4
.grey-border .border-lighter-3
.grey-border .border-lighter-2
.grey-border .border-lighter-1
.grey-border
.grey-border .border-darker-1
.grey-border .border-darker-2
.grey-border .border-darker-3
.grey-border .border-darker-4
.blue-grey-border .border-lighter-5
.blue-grey-border .border-lighter-4
.blue-grey-border .border-lighter-3
.blue-grey-border .border-lighter-2
.blue-grey-border .border-lighter-1
.blue-grey-border
.blue-grey-border .border-darker-1
.blue-grey-border .border-darker-2
.blue-grey-border .border-darker-3
.blue-grey-border .border-darker-4
.black-border
.white-border
.transparent-border

<div id="graph1"></div>

Border alpha opacity

To be able to use alpha opacity on border you need to add also a border color class.

.border
.border .black-border .alpha-8
.border .black-border .alpha-6
.border .black-border .alpha-4
.border .black-border .alpha-2

<div id="graph1"></div>

Border width

.border
.border .border-2
.border .border-3
.border .border-4
.border .border-5

<div id="graph1"></div>

Border style

To be able to use border style, it needs to have assigned a border color class, otherwise it is rewritten by Bootstrap default style

.border
.black-border .border-dotted
.black-border .border-dashed

<div id="graph1"></div>

Shadows

.shadow-0
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5

<div id="graph1"></div>

Shadows hover

.shadow-0 .hover-up
.shadow-1 .hover-up
.shadow-2 .hover-up
.shadow-3 .hover-up
.shadow-4 .hover-up
.shadow-5 .hover-up
.shadow-0 .hover-down
.shadow-1 .hover-down
.shadow-2 .hover-down
.shadow-3 .hover-down
.shadow-4 .hover-down
.shadow-5 .hover-down

<div id="graph1"></div>

Shadow colors

.red-shadow
.pink-shadow
.purple-shadow
.deep-purple-shadow
.indigo-shadow
.blue-shadow
.light-blue-shadow
.cyan-shadow
.teal-shadow
.green-shadow
.light-green-shadow
.lime-shadow
.yellow-shadow
.amber-shadow
.orange-shadow
.deep-orange-shadow
.brown-shadow
.grey-shadow
.blue-grey-shadow
.black-shadow

<div id="graph1"></div>