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

# Border Radius

The following utility classes control the border-radius of elements:

## `.radius-{value}`

Sets the border-radius property to the specified value, rounding all corners of the element.

CSS equivalent: `border-radius: {value};`

Example usage:

```html
<div class="radius-4">
  <!-- Content with border-radius 4px -->
</div>
```

***

## `.radius-t-r-{value}`

Sets the border-top-right-radius property to the specified value, rounding the top-right corner of the element.

CSS equivalent: `border-top-right-radius: {value};`

Example usage:

```html
<div class="radius-t-r-8">
  <!-- Content with top-right corner rounded with radius 8px -->
</div>
```

***

## `.radius-t-l-{value}`

Sets the border-top-left-radius property to the specified value, rounding the top-left corner of the element.

CSS equivalent: `border-top-left-radius: {value};`

Example usage:

```html
<div class="radius-t-l-8">
  <!-- Content with top-left corner rounded with radius 8px -->
</div>
```

***

## `.radius-b-r-{value}`

Sets the border-bottom-right-radius property to the specified value, rounding the bottom-right corner of the element.

CSS equivalent: `border-bottom-right-radius: {value};`

Example usage:

```html
<div class="radius-b-r-8">
  <!-- Content with bottom-right corner rounded with radius 8px -->
</div>
```

***

## `.radius-b-l-{value}`

Sets the border-bottom-left-radius property to the specified value, rounding the bottom-left corner of the element.

CSS equivalent: `border-bottom-left-radius: {value};`

Example usage:

```html
<div class="radius-b-l-8">
  <!-- Content with bottom-left corner rounded with radius 8px -->
</div>
```

***

## `.round`

Sets the border-radius property to 50%, creating a circular shape for the element.

CSS equivalent: `border-radius: 50%;`

Example usage:

```html
<div class="round">
  <!-- Content with a circular shape -->
</div>
```

***

These utility classes allow you to easily control the border-radius of elements, creating rounded corners or circular shapes based on your desired values.