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 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 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 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.