> 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-width.md).

# Border width

The following utility classes control the border width of elements:

## `.border-{value}`

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

CSS equivalent: `border-width: {value}px;`

Example usage:

```html
<div class="border border-2">
  <!-- Content with border width of 2px -->
</div>
```

***

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

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

CSS equivalent: `border-top-width: {value}px;`

Example usage:

```html
<div class="border border-t-4">
  <!-- Content with top border width of 4px -->
</div>
```

***

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

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

CSS equivalent: `border-bottom-width: {value}px;`

Example usage:

```html
<div class="border border-b-4">
  <!-- Content with bottom border width of 4px -->
</div>
```

***

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

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

CSS equivalent: `border-left-width: {value}px;`

Example usage:

```html
<div class="border border-l-4">
  <!-- Content with left border width of 4px -->
</div>
```

***

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

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

CSS equivalent: `border-right-width: {value}px;`

Example usage:

```html
<div class="border border-r-4">
  <!-- Content with right border width of 4px -->
</div>
```

***

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

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

CSS equivalent: `border-left-width: {value}px; border-right-width: {value}px;`

Example usage:

```html
<div class="border border-x-2">
  <!-- Content with left and right border width of 2px -->
</div>
```

***

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

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

CSS equivalent: `border-top-width: {value}px; border-bottom-width: {value}px;`

Example usage:

```html
<div class="border border-y-2">
  <!-- Content with top and bottom border width of 2px -->
</div>
```

***

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