# Border Radius

Set the radius for element borders.

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

Chrome 4 · Edge 12 · Firefox 4 · Safari 5

| Class | Properties | Value |
|-------|------------|-------|
| `br:0` | border-radius | `0` |
| `br:9999` | border-radius | `9999px` |
| `br:xs` | border-radius | `0.125rem` |
| `br:sm` | border-radius | `0.25rem` |
| `br:md` | border-radius | `0.375rem` |
| `br:lg` | border-radius | `0.5rem` |
| `br:xl` | border-radius | `0.75rem` |
| `br:xxl` | border-radius | `1rem` |
| `br:3xl` | border-radius | `1.5rem` |
| `br:100%` | border-radius | `100%` |
| `br:50%` | border-radius | `50%` |
| `br:px` | border-radius | `1px` |

## Border Block End Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bber:0` | border-end-end-radius, border-end-start-radius | `0` |
| `bber:9999` | border-end-end-radius, border-end-start-radius | `9999px` |
| `bber:xs` | border-end-end-radius, border-end-start-radius | `0.125rem` |
| `bber:sm` | border-end-end-radius, border-end-start-radius | `0.25rem` |
| `bber:md` | border-end-end-radius, border-end-start-radius | `0.375rem` |
| `bber:lg` | border-end-end-radius, border-end-start-radius | `0.5rem` |
| `bber:xl` | border-end-end-radius, border-end-start-radius | `0.75rem` |
| `bber:xxl` | border-end-end-radius, border-end-start-radius | `1rem` |
| `bber:3xl` | border-end-end-radius, border-end-start-radius | `1.5rem` |
| `bber:100%` | border-end-end-radius, border-end-start-radius | `100%` |
| `bber:50%` | border-end-end-radius, border-end-start-radius | `50%` |
| `bber:px` | border-end-end-radius, border-end-start-radius | `1px` |

## Border Block Start Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bbsr:0` | border-start-start-radius, border-start-end-radius | `0` |
| `bbsr:9999` | border-start-start-radius, border-start-end-radius | `9999px` |
| `bbsr:xs` | border-start-start-radius, border-start-end-radius | `0.125rem` |
| `bbsr:sm` | border-start-start-radius, border-start-end-radius | `0.25rem` |
| `bbsr:md` | border-start-start-radius, border-start-end-radius | `0.375rem` |
| `bbsr:lg` | border-start-start-radius, border-start-end-radius | `0.5rem` |
| `bbsr:xl` | border-start-start-radius, border-start-end-radius | `0.75rem` |
| `bbsr:xxl` | border-start-start-radius, border-start-end-radius | `1rem` |
| `bbsr:3xl` | border-start-start-radius, border-start-end-radius | `1.5rem` |
| `bbsr:100%` | border-start-start-radius, border-start-end-radius | `100%` |
| `bbsr:50%` | border-start-start-radius, border-start-end-radius | `50%` |
| `bbsr:px` | border-start-start-radius, border-start-end-radius | `1px` |

## Border Bottom Left Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bblr:0` | border-bottom-left-radius | `0` |
| `bblr:9999` | border-bottom-left-radius | `9999px` |
| `bblr:xs` | border-bottom-left-radius | `0.125rem` |
| `bblr:sm` | border-bottom-left-radius | `0.25rem` |
| `bblr:md` | border-bottom-left-radius | `0.375rem` |
| `bblr:lg` | border-bottom-left-radius | `0.5rem` |
| `bblr:xl` | border-bottom-left-radius | `0.75rem` |
| `bblr:xxl` | border-bottom-left-radius | `1rem` |
| `bblr:3xl` | border-bottom-left-radius | `1.5rem` |
| `bblr:100%` | border-bottom-left-radius | `100%` |
| `bblr:50%` | border-bottom-left-radius | `50%` |
| `bblr:px` | border-bottom-left-radius | `1px` |

## Border Bottom Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bbr:0` | border-bottom-right-radius, border-bottom-left-radius | `0` |
| `bbr:9999` | border-bottom-right-radius, border-bottom-left-radius | `9999px` |
| `bbr:xs` | border-bottom-right-radius, border-bottom-left-radius | `0.125rem` |
| `bbr:sm` | border-bottom-right-radius, border-bottom-left-radius | `0.25rem` |
| `bbr:md` | border-bottom-right-radius, border-bottom-left-radius | `0.375rem` |
| `bbr:lg` | border-bottom-right-radius, border-bottom-left-radius | `0.5rem` |
| `bbr:xl` | border-bottom-right-radius, border-bottom-left-radius | `0.75rem` |
| `bbr:xxl` | border-bottom-right-radius, border-bottom-left-radius | `1rem` |
| `bbr:3xl` | border-bottom-right-radius, border-bottom-left-radius | `1.5rem` |
| `bbr:100%` | border-bottom-right-radius, border-bottom-left-radius | `100%` |
| `bbr:50%` | border-bottom-right-radius, border-bottom-left-radius | `50%` |
| `bbr:px` | border-bottom-right-radius, border-bottom-left-radius | `1px` |

## Border Bottom Right Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bbrr:0` | border-bottom-right-radius | `0` |
| `bbrr:9999` | border-bottom-right-radius | `9999px` |
| `bbrr:xs` | border-bottom-right-radius | `0.125rem` |
| `bbrr:sm` | border-bottom-right-radius | `0.25rem` |
| `bbrr:md` | border-bottom-right-radius | `0.375rem` |
| `bbrr:lg` | border-bottom-right-radius | `0.5rem` |
| `bbrr:xl` | border-bottom-right-radius | `0.75rem` |
| `bbrr:xxl` | border-bottom-right-radius | `1rem` |
| `bbrr:3xl` | border-bottom-right-radius | `1.5rem` |
| `bbrr:100%` | border-bottom-right-radius | `100%` |
| `bbrr:50%` | border-bottom-right-radius | `50%` |
| `bbrr:px` | border-bottom-right-radius | `1px` |

## Border End End Radius

| Class | Properties | Value |
|-------|------------|-------|
| `beer:0` | border-end-end-radius | `0` |
| `beer:9999` | border-end-end-radius | `9999px` |
| `beer:xs` | border-end-end-radius | `0.125rem` |
| `beer:sm` | border-end-end-radius | `0.25rem` |
| `beer:md` | border-end-end-radius | `0.375rem` |
| `beer:lg` | border-end-end-radius | `0.5rem` |
| `beer:xl` | border-end-end-radius | `0.75rem` |
| `beer:xxl` | border-end-end-radius | `1rem` |
| `beer:3xl` | border-end-end-radius | `1.5rem` |
| `beer:100%` | border-end-end-radius | `100%` |
| `beer:50%` | border-end-end-radius | `50%` |
| `beer:px` | border-end-end-radius | `1px` |

## Border End Start Radius

| Class | Properties | Value |
|-------|------------|-------|
| `besr:0` | border-end-start-radius | `0` |
| `besr:9999` | border-end-start-radius | `9999px` |
| `besr:xs` | border-end-start-radius | `0.125rem` |
| `besr:sm` | border-end-start-radius | `0.25rem` |
| `besr:md` | border-end-start-radius | `0.375rem` |
| `besr:lg` | border-end-start-radius | `0.5rem` |
| `besr:xl` | border-end-start-radius | `0.75rem` |
| `besr:xxl` | border-end-start-radius | `1rem` |
| `besr:3xl` | border-end-start-radius | `1.5rem` |
| `besr:100%` | border-end-start-radius | `100%` |
| `besr:50%` | border-end-start-radius | `50%` |
| `besr:px` | border-end-start-radius | `1px` |

## Border Inline End Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bier:0` | border-start-end-radius, border-end-end-radius | `0` |
| `bier:9999` | border-start-end-radius, border-end-end-radius | `9999px` |
| `bier:xs` | border-start-end-radius, border-end-end-radius | `0.125rem` |
| `bier:sm` | border-start-end-radius, border-end-end-radius | `0.25rem` |
| `bier:md` | border-start-end-radius, border-end-end-radius | `0.375rem` |
| `bier:lg` | border-start-end-radius, border-end-end-radius | `0.5rem` |
| `bier:xl` | border-start-end-radius, border-end-end-radius | `0.75rem` |
| `bier:xxl` | border-start-end-radius, border-end-end-radius | `1rem` |
| `bier:3xl` | border-start-end-radius, border-end-end-radius | `1.5rem` |
| `bier:100%` | border-start-end-radius, border-end-end-radius | `100%` |
| `bier:50%` | border-start-end-radius, border-end-end-radius | `50%` |
| `bier:px` | border-start-end-radius, border-end-end-radius | `1px` |

## Border Inline Start Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bisr:0` | border-start-start-radius, border-end-start-radius | `0` |
| `bisr:9999` | border-start-start-radius, border-end-start-radius | `9999px` |
| `bisr:xs` | border-start-start-radius, border-end-start-radius | `0.125rem` |
| `bisr:sm` | border-start-start-radius, border-end-start-radius | `0.25rem` |
| `bisr:md` | border-start-start-radius, border-end-start-radius | `0.375rem` |
| `bisr:lg` | border-start-start-radius, border-end-start-radius | `0.5rem` |
| `bisr:xl` | border-start-start-radius, border-end-start-radius | `0.75rem` |
| `bisr:xxl` | border-start-start-radius, border-end-start-radius | `1rem` |
| `bisr:3xl` | border-start-start-radius, border-end-start-radius | `1.5rem` |
| `bisr:100%` | border-start-start-radius, border-end-start-radius | `100%` |
| `bisr:50%` | border-start-start-radius, border-end-start-radius | `50%` |
| `bisr:px` | border-start-start-radius, border-end-start-radius | `1px` |

## Border Left Radius

| Class | Properties | Value |
|-------|------------|-------|
| `blr:0` | border-top-left-radius, border-bottom-left-radius | `0` |
| `blr:9999` | border-top-left-radius, border-bottom-left-radius | `9999px` |
| `blr:xs` | border-top-left-radius, border-bottom-left-radius | `0.125rem` |
| `blr:sm` | border-top-left-radius, border-bottom-left-radius | `0.25rem` |
| `blr:md` | border-top-left-radius, border-bottom-left-radius | `0.375rem` |
| `blr:lg` | border-top-left-radius, border-bottom-left-radius | `0.5rem` |
| `blr:xl` | border-top-left-radius, border-bottom-left-radius | `0.75rem` |
| `blr:xxl` | border-top-left-radius, border-bottom-left-radius | `1rem` |
| `blr:3xl` | border-top-left-radius, border-bottom-left-radius | `1.5rem` |
| `blr:100%` | border-top-left-radius, border-bottom-left-radius | `100%` |
| `blr:50%` | border-top-left-radius, border-bottom-left-radius | `50%` |
| `blr:px` | border-top-left-radius, border-bottom-left-radius | `1px` |

## Border Right Radius

| Class | Properties | Value |
|-------|------------|-------|
| `brr:0` | border-top-right-radius, border-bottom-right-radius | `0` |
| `brr:9999` | border-top-right-radius, border-bottom-right-radius | `9999px` |
| `brr:xs` | border-top-right-radius, border-bottom-right-radius | `0.125rem` |
| `brr:sm` | border-top-right-radius, border-bottom-right-radius | `0.25rem` |
| `brr:md` | border-top-right-radius, border-bottom-right-radius | `0.375rem` |
| `brr:lg` | border-top-right-radius, border-bottom-right-radius | `0.5rem` |
| `brr:xl` | border-top-right-radius, border-bottom-right-radius | `0.75rem` |
| `brr:xxl` | border-top-right-radius, border-bottom-right-radius | `1rem` |
| `brr:3xl` | border-top-right-radius, border-bottom-right-radius | `1.5rem` |
| `brr:100%` | border-top-right-radius, border-bottom-right-radius | `100%` |
| `brr:50%` | border-top-right-radius, border-bottom-right-radius | `50%` |
| `brr:px` | border-top-right-radius, border-bottom-right-radius | `1px` |

## Border Start End Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bser:0` | border-start-end-radius | `0` |
| `bser:9999` | border-start-end-radius | `9999px` |
| `bser:xs` | border-start-end-radius | `0.125rem` |
| `bser:sm` | border-start-end-radius | `0.25rem` |
| `bser:md` | border-start-end-radius | `0.375rem` |
| `bser:lg` | border-start-end-radius | `0.5rem` |
| `bser:xl` | border-start-end-radius | `0.75rem` |
| `bser:xxl` | border-start-end-radius | `1rem` |
| `bser:3xl` | border-start-end-radius | `1.5rem` |
| `bser:100%` | border-start-end-radius | `100%` |
| `bser:50%` | border-start-end-radius | `50%` |
| `bser:px` | border-start-end-radius | `1px` |

## Border Start Start Radius

| Class | Properties | Value |
|-------|------------|-------|
| `bssr:0` | border-start-start-radius | `0` |
| `bssr:9999` | border-start-start-radius | `9999px` |
| `bssr:xs` | border-start-start-radius | `0.125rem` |
| `bssr:sm` | border-start-start-radius | `0.25rem` |
| `bssr:md` | border-start-start-radius | `0.375rem` |
| `bssr:lg` | border-start-start-radius | `0.5rem` |
| `bssr:xl` | border-start-start-radius | `0.75rem` |
| `bssr:xxl` | border-start-start-radius | `1rem` |
| `bssr:3xl` | border-start-start-radius | `1.5rem` |
| `bssr:100%` | border-start-start-radius | `100%` |
| `bssr:50%` | border-start-start-radius | `50%` |
| `bssr:px` | border-start-start-radius | `1px` |

## Border Top Left Radius

| Class | Properties | Value |
|-------|------------|-------|
| `btlr:0` | border-top-left-radius | `0` |
| `btlr:9999` | border-top-left-radius | `9999px` |
| `btlr:xs` | border-top-left-radius | `0.125rem` |
| `btlr:sm` | border-top-left-radius | `0.25rem` |
| `btlr:md` | border-top-left-radius | `0.375rem` |
| `btlr:lg` | border-top-left-radius | `0.5rem` |
| `btlr:xl` | border-top-left-radius | `0.75rem` |
| `btlr:xxl` | border-top-left-radius | `1rem` |
| `btlr:3xl` | border-top-left-radius | `1.5rem` |
| `btlr:100%` | border-top-left-radius | `100%` |
| `btlr:50%` | border-top-left-radius | `50%` |
| `btlr:px` | border-top-left-radius | `1px` |

## Border Top Radius

| Class | Properties | Value |
|-------|------------|-------|
| `btr:0` | border-top-left-radius, border-top-right-radius | `0` |
| `btr:9999` | border-top-left-radius, border-top-right-radius | `9999px` |
| `btr:xs` | border-top-left-radius, border-top-right-radius | `0.125rem` |
| `btr:sm` | border-top-left-radius, border-top-right-radius | `0.25rem` |
| `btr:md` | border-top-left-radius, border-top-right-radius | `0.375rem` |
| `btr:lg` | border-top-left-radius, border-top-right-radius | `0.5rem` |
| `btr:xl` | border-top-left-radius, border-top-right-radius | `0.75rem` |
| `btr:xxl` | border-top-left-radius, border-top-right-radius | `1rem` |
| `btr:3xl` | border-top-left-radius, border-top-right-radius | `1.5rem` |
| `btr:100%` | border-top-left-radius, border-top-right-radius | `100%` |
| `btr:50%` | border-top-left-radius, border-top-right-radius | `50%` |
| `btr:px` | border-top-left-radius, border-top-right-radius | `1px` |

## Border Top Right Radius

| Class | Properties | Value |
|-------|------------|-------|
| `btrr:0` | border-top-right-radius | `0` |
| `btrr:9999` | border-top-right-radius | `9999px` |
| `btrr:xs` | border-top-right-radius | `0.125rem` |
| `btrr:sm` | border-top-right-radius | `0.25rem` |
| `btrr:md` | border-top-right-radius | `0.375rem` |
| `btrr:lg` | border-top-right-radius | `0.5rem` |
| `btrr:xl` | border-top-right-radius | `0.75rem` |
| `btrr:xxl` | border-top-right-radius | `1rem` |
| `btrr:3xl` | border-top-right-radius | `1.5rem` |
| `btrr:100%` | border-top-right-radius | `100%` |
| `btrr:50%` | border-top-right-radius | `50%` |
| `btrr:px` | border-top-right-radius | `1px` |

## Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `br:0` | border-radius | `0` |
| `br:9999` | border-radius | `9999px` |
| `br:xs` | border-radius | `0.125rem` |
| `br:sm` | border-radius | `0.25rem` |
| `br:md` | border-radius | `0.375rem` |
| `br:lg` | border-radius | `0.5rem` |
| `br:xl` | border-radius | `0.75rem` |
| `br:xxl` | border-radius | `1rem` |
| `br:3xl` | border-radius | `1.5rem` |
| `br:100%` | border-radius | `100%` |
| `br:50%` | border-radius | `50%` |
| `br:px` | border-radius | `1px` |

## Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `br:0` | border-radius | `0` |
| `br:9999` | border-radius | `9999px` |
| `br:xs` | border-radius | `0.125rem` |
| `br:sm` | border-radius | `0.25rem` |
| `br:md` | border-radius | `0.375rem` |
| `br:lg` | border-radius | `0.5rem` |
| `br:xl` | border-radius | `0.75rem` |
| `br:xxl` | border-radius | `1rem` |
| `br:3xl` | border-radius | `1.5rem` |
| `br:100%` | border-radius | `100%` |
| `br:50%` | border-radius | `50%` |
| `br:px` | border-radius | `1px` |