> For the complete documentation index, see [llms.txt](https://nextgencss.gitbook.io/untitled/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextgencss.gitbook.io/untitled/quick-start/border.md).

# Border

## Syntax&#x20;

````sass
```other code in syntax file
   border : "b",
```
````

## Border

*To give the border to your HTML element*

*There are majorly **5** types of border with* [*colors*](/untitled/quick-start/colors.md)

* `.b-{..color..}` To give border in all direction (top,bottom,left,right)
* `.bt-{..color..}` To give border in top direction
* `.bb-{..color..}` To give border in bottom direction
* `.bl-{..color..}` To give border in left direction
* `.br-{..color..}` To give border in right direction

## Examples

```html
<p class="b-dark mg-y-1">Border</p>
<p class="bt-primary mg-y-1">Border-Top</p>
<p class="bb-alert mg-y-1">Border-Bottom</p>
<p class="bl-yellow mg-y-1">Border-Left</p>
<p class="br-leaf mg-y-1">Border-Right</p>
```

<figure><img src="/files/5rjW6kBMQ7SGQY47USbZ" alt=""><figcaption><p>Output of code</p></figcaption></figure>
