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

# Border Color

The following utility classes control the border color of elements:

## `.border-{color}`

Sets the border-color property to the specified color value for all sides of the element.

CSS equivalent: `border-color: {color};`

Example usage:

```html
<div class="border border-red">
  <!-- Content with red border color -->
</div>
```

***

## `.border-t-{color}`

Sets the border-top-color property to the specified color value, controlling the top border color of the element.

CSS equivalent: `border-top-color: {color};`

Example usage:

```html
<div class="border border-t-blue">
  <!-- Content with blue top border color -->
</div>
```

***

## `.border-b-{color}`

Sets the border-bottom-color property to the specified color value, controlling the bottom border color of the element.

CSS equivalent: `border-bottom-color: {color};`

Example usage:

```html
<div class="border border-b-green">
  <!-- Content with green bottom border color -->
</div>
```

***

## `.border-l-{color}`

Sets the border-left-color property to the specified color value, controlling the left border color of the element.

CSS equivalent: `border-left-color: {color};`

Example usage:

```html
<div class="border border-l-purple">
  <!-- Content with purple left border color -->
</div>
```

***

## `.border-r-{color}`

Sets the border-right-color property to the specified color value, controlling the right border color of the element.

CSS equivalent: `border-right-color: {color};`

Example usage:

```html
<div class="border border-r-orange">
  <!-- Content with orange right border color -->
</div>
```

***

## `.border-x-{color}`

Sets the border-left-color and border-right-color properties to the specified color value, controlling the horizontal border color of the element.

CSS equivalent: `border-left-color: {color}; border-right-color: {color};`

Example usage:

```html
<div class="border border-x-gray">
  <!-- Content with gray horizontal border color -->
</div>
```

***

## `.border-y-{color}`

Sets the border-top-color and border-bottom-color properties to the specified color value, controlling the vertical border color of the element.

CSS equivalent: `border-top-color: {color}; border-bottom-color: {color};`

Example usage:

```html
<div class="border border-y-pink">
  <!-- Content with pink vertical border color -->
</div>
```

***

These utility classes allow you to easily control the border color of elements, providing flexibility in styling the borders according to your design requirements.