Skip to main content

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.