turretcss

Border Color

Border Color

Current Color
Inherit
White
Black
<div class="border border-color-current-color">...</div>
<div class="border border-color-inherit">...</div>
<div class="border border-color-white">...</div>
<div class="border border-color-black">...</div>

Shades

Light

Light
Light 50
Light 100
Light 200
Light 300
Light 400
Light 500
Light 600
Light 700
Light 800
Light 900
<div class="border border-color-light">...</div>
<div class="border border-color-light-50">...</div>
<div class="border border-color-light-100">...</div>
<div class="border border-color-light-200">...</div>
<div class="border border-color-light-300">...</div>
<div class="border border-color-light-400">...</div>
<div class="border border-color-light-500">...</div>
<div class="border border-color-light-600">...</div>
<div class="border border-color-light-700">...</div>
<div class="border border-color-light-800">...</div>
<div class="border border-color-light-900">...</div>

Grey

Grey
Grey 50
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Grey 700
Grey 800
Grey 900
<div class="border border-color-grey">...</div>
<div class="border border-color-grey-50">...</div>
<div class="border border-color-grey-100">...</div>
<div class="border border-color-grey-200">...</div>
<div class="border border-color-grey-300">...</div>
<div class="border border-color-grey-400">...</div>
<div class="border border-color-grey-500">...</div>
<div class="border border-color-grey-600">...</div>
<div class="border border-color-grey-700">...</div>
<div class="border border-color-grey-800">...</div>
<div class="border border-color-grey-900">...</div>

Dark

Dark
Dark 50
Dark 100
Dark 200
Dark 300
Dark 400
Dark 500
Dark 600
Dark 700
Dark 800
Dark 900
<div class="border border-color-dark">...</div>
<div class="border border-color-dark-50">...</div>
<div class="border border-color-dark-100">...</div>
<div class="border border-color-dark-200">...</div>
<div class="border border-color-dark-300">...</div>
<div class="border border-color-dark-400">...</div>
<div class="border border-color-dark-500">...</div>
<div class="border border-color-dark-600">...</div>
<div class="border border-color-dark-700">...</div>
<div class="border border-color-dark-800">...</div>
<div class="border border-color-dark-900">...</div>

Palettes

Primary

Primary
Primary 50
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
<div class="border border-color-primary">...</div>
<div class="border border-color-primary-50">...</div>
<div class="border border-color-primary-100">...</div>
<div class="border border-color-primary-200">...</div>
<div class="border border-color-primary-300">...</div>
<div class="border border-color-primary-400">...</div>
<div class="border border-color-primary-500">...</div>
<div class="border border-color-primary-600">...</div>
<div class="border border-color-primary-700">...</div>
<div class="border border-color-primary-800">...</div>
<div class="border border-color-primary-900">...</div>

Secondary

Secondary
Secondary 50
Secondary 100
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Secondary 900
<div class="border border-color-secondary">...</div>
<div class="border border-color-secondary-50">...</div>
<div class="border border-color-secondary-100">...</div>
<div class="border border-color-secondary-200">...</div>
<div class="border border-color-secondary-300">...</div>
<div class="border border-color-secondary-400">...</div>
<div class="border border-color-secondary-500">...</div>
<div class="border border-color-secondary-600">...</div>
<div class="border border-color-secondary-700">...</div>
<div class="border border-color-secondary-800">...</div>
<div class="border border-color-secondary-900">...</div>

Tertiary

Tertiary
Tertiary 50
Tertiary 100
Tertiary 200
Tertiary 300
Tertiary 400
Tertiary 500
Tertiary 600
Tertiary 700
Tertiary 800
Tertiary 900
<div class="border border-color-tertiary">...</div>
<div class="border border-color-tertiary-50">...</div>
<div class="border border-color-tertiary-100">...</div>
<div class="border border-color-tertiary-200">...</div>
<div class="border border-color-tertiary-300">...</div>
<div class="border border-color-tertiary-400">...</div>
<div class="border border-color-tertiary-500">...</div>
<div class="border border-color-tertiary-600">...</div>
<div class="border border-color-tertiary-700">...</div>
<div class="border border-color-tertiary-800">...</div>
<div class="border border-color-tertiary-900">...</div>

Indicators

Info

Info
Info 50
Info 100
Info 200
Info 300
Info 400
Info 500
Info 600
Info 700
Info 800
Info 900
<div class="border border-color-info">...</div>
<div class="border border-color-info-50">...</div>
<div class="border border-color-info-100">...</div>
<div class="border border-color-info-200">...</div>
<div class="border border-color-info-300">...</div>
<div class="border border-color-info-400">...</div>
<div class="border border-color-info-500">...</div>
<div class="border border-color-info-600">...</div>
<div class="border border-color-info-700">...</div>
<div class="border border-color-info-800">...</div>
<div class="border border-color-info-900">...</div>

Error

Error
Error 50
Error 100
Error 200
Error 300
Error 400
Error 500
Error 600
Error 700
Error 800
Error 900
<div class="border border-color-error">...</div>
<div class="border border-color-error-50">...</div>
<div class="border border-color-error-100">...</div>
<div class="border border-color-error-200">...</div>
<div class="border border-color-error-300">...</div>
<div class="border border-color-error-400">...</div>
<div class="border border-color-error-500">...</div>
<div class="border border-color-error-600">...</div>
<div class="border border-color-error-700">...</div>
<div class="border border-color-error-800">...</div>
<div class="border border-color-error-900">...</div>

Warning

Warning
Warning 50
Warning 100
Warning 200
Warning 300
Warning 400
Warning 500
Warning 600
Warning 700
Warning 800
Warning 900
<div class="border border-color-warning">...</div>
<div class="border border-color-warning-50">...</div>
<div class="border border-color-warning-100">...</div>
<div class="border border-color-warning-200">...</div>
<div class="border border-color-warning-300">...</div>
<div class="border border-color-warning-400">...</div>
<div class="border border-color-warning-500">...</div>
<div class="border border-color-warning-600">...</div>
<div class="border border-color-warning-700">...</div>
<div class="border border-color-warning-800">...</div>
<div class="border border-color-warning-900">...</div>

Success

Success
Success 50
Success 100
Success 200
Success 300
Success 400
Success 500
Success 600
Success 700
Success 800
Success 900
<div class="border border-color-success">...</div>
<div class="border border-color-success-50">...</div>
<div class="border border-color-success-100">...</div>
<div class="border border-color-success-200">...</div>
<div class="border border-color-success-300">...</div>
<div class="border border-color-success-400">...</div>
<div class="border border-color-success-500">...</div>
<div class="border border-color-success-600">...</div>
<div class="border border-color-success-700">...</div>
<div class="border border-color-success-800">...</div>
<div class="border border-color-success-900">...</div>

Related