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

<div class="padding-xs border">Border</div>

```html
<div class="border">...</div>
```

| Class       | Description                                                                 |
| ----------- | --------------------------------------------------------------------------- |
| `no-border` | Removes border. **Note:** !important is used to override specificity issues |

## Border Directions

<div class="padding-xs margin-bottom-xs border-vertical">Vertical</div>
<div class="padding-xs margin-bottom-xs border-horizontal">Horizontal</div>
<div class="padding-xs margin-bottom-xs border-top">Top</div>
<div class="padding-xs margin-bottom-xs border-right">Right</div>
<div class="padding-xs margin-bottom-xs border-bottom">Bottom</div>
<div class="padding-xs border-left">Left</div>

```html
<div class="border-vertical">...</div>
<div class="border-horizontal">...</div>
<div class="border-top">...</div>
<div class="border-right">...</div>
<div class="border-bottom">...</div>
<div class="border-left">...</div>
```