Border Radius

Set the radius for element borders.

Widely available

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

Chrome
Edge
Firefox
Safari

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

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

Border Block Start Radius

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

Border Bottom Left Radius

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

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

Border Bottom Right Radius

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

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

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

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

Border Inline Start Radius

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

Border Left Radius

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

Border Right Radius

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

Border Start End Radius

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

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

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

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

Border Top Right Radius

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.

Pseudo Classes

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