> 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

Border of your HTML element

## Syntax 

````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="https://2921085085-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg5nbtYYIYcbVnZhdfLY2%2Fuploads%2Fgit-blob-d79c9bb840eb68387cd8f675330d5cca2d2e0d4f%2Fimg3.png?alt=media" alt=""><figcaption><p>Output of code</p></figcaption></figure>