---
layout: docs
title: Border Color
description: null
---

## Border Color

<div class="padding-xs margin-vertical-xs border border-color-current-color">Current Color</div>
<div class="padding-xs margin-vertical-xs border border-color-inherit">Inherit</div>
<div class="padding-xs margin-vertical-xs border border-color-white">White</div>
<div class="padding-xs margin-vertical-xs border border-color-black">Black</div>

```html
<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

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

```html
<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

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

```html
<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

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

```html
<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

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

```html
<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

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

```html
<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

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

```html
<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

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

```html
<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

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

```html
<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

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

```html
<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

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

```html
<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>
```
