Border Radius

Controls the radius of the borders of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Class	Style
`br-0`	`border-radius: 0rem;`
`br-1`	`border-radius: 0.25rem;`
`br-2`	`border-radius: 0.5rem;`
`br-3`	`border-radius: 0.75rem;`
`br-4`	`border-radius: 1rem;`
`br-5`	`border-radius: 1.25rem;`
`br-6`	`border-radius: 1.5rem;`
`br-7`	`border-radius: 1.75rem;`
`br-8`	`border-radius: 2rem;`
`br-full`	`border-radius: 100%;`
`br-half`	`border-radius: 50%;`
`br-pill`	`border-radius: 9999px;`
`br-px`	`border-radius: 1px;`

Applies a radius of 0.5rem to all corners of an element.

<div class="bg-indigo d-16 br-2"></div>

Top Radius

Applies a radius of 0.5rem to the top border of an element.

Class	Style
`br-t-0`	`border-top-left-radius: 0rem;`
`br-t-1`	`border-top-left-radius: 0.25rem;`
`br-t-2`	`border-top-left-radius: 0.5rem;`
`br-t-3`	`border-top-left-radius: 0.75rem;`
`br-t-4`	`border-top-left-radius: 1rem;`
`br-t-5`	`border-top-left-radius: 1.25rem;`
`br-t-6`	`border-top-left-radius: 1.5rem;`
`br-t-7`	`border-top-left-radius: 1.75rem;`
`br-t-8`	`border-top-left-radius: 2rem;`
`br-t-full`	`border-top-left-radius: 100%;`
`br-t-half`	`border-top-left-radius: 50%;`
`br-t-pill`	`border-top-left-radius: 9999px;`
`br-t-px`	`border-top-left-radius: 1px;`

<div class="bg-indigo d-16 br-t-2"></div>

Right Radius

Applies a radius of 0.5rem to the right border of an element.

Class	Style
`br-r-0`	`border-bottom-right-radius: 0rem;`
`br-r-1`	`border-bottom-right-radius: 0.25rem;`
`br-r-2`	`border-bottom-right-radius: 0.5rem;`
`br-r-3`	`border-bottom-right-radius: 0.75rem;`
`br-r-4`	`border-bottom-right-radius: 1rem;`
`br-r-5`	`border-bottom-right-radius: 1.25rem;`
`br-r-6`	`border-bottom-right-radius: 1.5rem;`
`br-r-7`	`border-bottom-right-radius: 1.75rem;`
`br-r-8`	`border-bottom-right-radius: 2rem;`
`br-r-full`	`border-bottom-right-radius: 100%;`
`br-r-half`	`border-bottom-right-radius: 50%;`
`br-r-pill`	`border-bottom-right-radius: 9999px;`
`br-r-px`	`border-bottom-right-radius: 1px;`

<div class="bg-indigo d-16 br-r-2"></div>

Bottom Radius

Applies a radius of 0.5rem to the bottom border of an element.

Class	Style
`br-b-0`	`border-bottom-left-radius: 0rem;`
`br-b-1`	`border-bottom-left-radius: 0.25rem;`
`br-b-2`	`border-bottom-left-radius: 0.5rem;`
`br-b-3`	`border-bottom-left-radius: 0.75rem;`
`br-b-4`	`border-bottom-left-radius: 1rem;`
`br-b-5`	`border-bottom-left-radius: 1.25rem;`
`br-b-6`	`border-bottom-left-radius: 1.5rem;`
`br-b-7`	`border-bottom-left-radius: 1.75rem;`
`br-b-8`	`border-bottom-left-radius: 2rem;`
`br-b-full`	`border-bottom-left-radius: 100%;`
`br-b-half`	`border-bottom-left-radius: 50%;`
`br-b-pill`	`border-bottom-left-radius: 9999px;`
`br-b-px`	`border-bottom-left-radius: 1px;`

Applies a radius of 0.5rem to the bottom border of an element.

<div class="bg-indigo d-16 br-b-2"></div>

Left Radius

Applies a radius of 0.5rem to the left border of an element.

Class	Style
`br-l-0`	`border-bottom-left-radius: 0rem;`
`br-l-1`	`border-bottom-left-radius: 0.25rem;`
`br-l-2`	`border-bottom-left-radius: 0.5rem;`
`br-l-3`	`border-bottom-left-radius: 0.75rem;`
`br-l-4`	`border-bottom-left-radius: 1rem;`
`br-l-5`	`border-bottom-left-radius: 1.25rem;`
`br-l-6`	`border-bottom-left-radius: 1.5rem;`
`br-l-7`	`border-bottom-left-radius: 1.75rem;`
`br-l-8`	`border-bottom-left-radius: 2rem;`
`br-l-full`	`border-bottom-left-radius: 100%;`
`br-l-half`	`border-bottom-left-radius: 50%;`
`br-l-pill`	`border-bottom-left-radius: 9999px;`
`br-l-px`	`border-bottom-left-radius: 1px;`

<div class="bg-indigo d-16 br-l-2"></div>

Top Right Radius

Applies a radius of 0.5rem to the top right corner of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Class	Style
`br-tr-0`	`border-top-right-radius: 0rem;`
`br-tr-1`	`border-top-right-radius: 0.25rem;`
`br-tr-2`	`border-top-right-radius: 0.5rem;`
`br-tr-3`	`border-top-right-radius: 0.75rem;`
`br-tr-4`	`border-top-right-radius: 1rem;`
`br-tr-5`	`border-top-right-radius: 1.25rem;`
`br-tr-6`	`border-top-right-radius: 1.5rem;`
`br-tr-7`	`border-top-right-radius: 1.75rem;`
`br-tr-8`	`border-top-right-radius: 2rem;`
`br-tr-full`	`border-top-right-radius: 100%;`
`br-tr-half`	`border-top-right-radius: 50%;`
`br-tr-pill`	`border-top-right-radius: 9999px;`
`br-tr-px`	`border-top-right-radius: 1px;`

<div class="bg-indigo d-16 br-tr-2"></div>

Bottom Right Radius

Applies a radius of 0.5rem to the bottom right corner of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Class	Style
`br-br-0`	`border-bottom-right-radius: 0rem;`
`br-br-1`	`border-bottom-right-radius: 0.25rem;`
`br-br-2`	`border-bottom-right-radius: 0.5rem;`
`br-br-3`	`border-bottom-right-radius: 0.75rem;`
`br-br-4`	`border-bottom-right-radius: 1rem;`
`br-br-5`	`border-bottom-right-radius: 1.25rem;`
`br-br-6`	`border-bottom-right-radius: 1.5rem;`
`br-br-7`	`border-bottom-right-radius: 1.75rem;`
`br-br-8`	`border-bottom-right-radius: 2rem;`
`br-br-full`	`border-bottom-right-radius: 100%;`
`br-br-half`	`border-bottom-right-radius: 50%;`
`br-br-pill`	`border-bottom-right-radius: 9999px;`
`br-br-px`	`border-bottom-right-radius: 1px;`

<div class="bg-indigo d-16 br-br-2"></div>

Bottom Left Radius

Applies a radius of 0.5rem to the bottom left corner of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Class	Style
`br-bl-0`	`border-bottom-left-radius: 0rem;`
`br-bl-1`	`border-bottom-left-radius: 0.25rem;`
`br-bl-2`	`border-bottom-left-radius: 0.5rem;`
`br-bl-3`	`border-bottom-left-radius: 0.75rem;`
`br-bl-4`	`border-bottom-left-radius: 1rem;`
`br-bl-5`	`border-bottom-left-radius: 1.25rem;`
`br-bl-6`	`border-bottom-left-radius: 1.5rem;`
`br-bl-7`	`border-bottom-left-radius: 1.75rem;`
`br-bl-8`	`border-bottom-left-radius: 2rem;`
`br-bl-full`	`border-bottom-left-radius: 100%;`
`br-bl-half`	`border-bottom-left-radius: 50%;`
`br-bl-pill`	`border-bottom-left-radius: 9999px;`
`br-bl-px`	`border-bottom-left-radius: 1px;`

<div class="bg-indigo d-16 br-bl-2"></div>

Top Left Radius

Applies a radius of 0.5rem to the top left corner of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Class	Style
`br-tl-0`	`border-top-left-radius: 0rem;`
`br-tl-1`	`border-top-left-radius: 0.25rem;`
`br-tl-2`	`border-top-left-radius: 0.5rem;`
`br-tl-3`	`border-top-left-radius: 0.75rem;`
`br-tl-4`	`border-top-left-radius: 1rem;`
`br-tl-5`	`border-top-left-radius: 1.25rem;`
`br-tl-6`	`border-top-left-radius: 1.5rem;`
`br-tl-7`	`border-top-left-radius: 1.75rem;`
`br-tl-8`	`border-top-left-radius: 2rem;`
`br-tl-full`	`border-top-left-radius: 100%;`
`br-tl-half`	`border-top-left-radius: 50%;`
`br-tl-pill`	`border-top-left-radius: 9999px;`
`br-tl-px`	`border-top-left-radius: 1px;`

<div class="bg-indigo d-16 br-tl-2"></div>

Using Percentages

This example showcases various border-radius utilities:

The br-full utility applies a border-radius of 100% to an element.
The br-half utility applies a border-radius of 50% to an element.

100%

50%

<div class="d-g g-8 gtc-1 sm:gtc-2">
  <div class="ai-c bg-indigo d-16 d-f jc-c br-full c-white">100%</div>
  <div class="ai-c bg-indigo d-16 d-f jc-c br-half c-white">50%</div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Targeting different viewports

You can combine responsive breakpoints like sm:rad-*, md:rad-*, lg:rad-*, and xxl:rad-* to allow targeting specific utilities in different viewports.

Targeting hover states

Alternatively, you can apply :hover by using h:rad-* utility to override elements and change their values when hovering over them.