Border radius

Stacks provides atomic classes for border radius.

Abbreviation Output Definition Responsive?
.bar0 border-radius: 0 Apply a border radius of 0 to all corners
.btlr0 border-top-left-radius: 0 Apply a border radius of 0 to the top left corner
.btrr0 border-top-right-radius: 0 Apply a border radius of 0 to the top right corner
.bblr0 border-bottom-left-radius: 0 Apply a border radius of 0 to the bottom left corner
.bbrr0 border-bottom-right-radius: 0 Apply a border radius of 0 to the bottom right corner
.btr0 border-top-left-radius: 0
border-top-right-radius: 0
Apply a border radius of 0 to the top corners
.brr0 border-top-right-radius: 0
border-bottom-right-radius: 0
Apply a border radius of 0 to the right corners
.bbr0 border-bottom-left-radius: 0
border-bottom-right-radius: 0
Apply a border radius of 0 to the bottom corners
.blr0 border-bottom-left-radius: 0
border-top-left-radius: 0
Apply a border radius of 0 to the left corners
.bar-sm border-radius: 4px Apply a border radius of 4px to all corners
.btlr-sm border-top-left-radius: 4px Apply a border radius of 4px to the top left corner
.btrr-sm border-top-right-radius: 4px Apply a border radius of 4px to the top right corner
.bblr-sm border-bottom-left-radius: 4px Apply a border radius of 4px to the bottom left corner
.bbrr-sm border-bottom-right-radius: 4px Apply a border radius of 4px to the bottom right corner
.btr-sm border-top-left-radius: 4px
border-top-right-radius: 4px
Apply a border radius of 4px to the top corners
.brr-sm border-top-right-radius: 4px
border-bottom-right-radius: 4px
Apply a border radius of 4px to the right corners
.bbr-sm border-bottom-left-radius: 4px
border-bottom-right-radius: 4px
Apply a border radius of 4px to the bottom corners
.blr-sm border-bottom-left-radius: 4px
border-top-left-radius: 4px
Apply a border radius of 4px to the left corners
.bar-md border-radius: 6px Apply a border radius of 6px to all corners
.btlr-md border-top-left-radius: 6px Apply a border radius of 6px to the top left corner
.btrr-md border-top-right-radius: 6px Apply a border radius of 6px to the top right corner
.bblr-md border-bottom-left-radius: 6px Apply a border radius of 6px to the bottom left corner
.bbrr-md border-bottom-right-radius: 6px Apply a border radius of 6px to the bottom right corner
.btr-md border-top-left-radius: 6px
border-top-right-radius: 6px
Apply a border radius of 6px to the top corners
.brr-md border-top-right-radius: 6px
border-bottom-right-radius: 6px
Apply a border radius of 6px to the right corners
.bbr-md border-bottom-left-radius: 6px
border-bottom-right-radius: 6px
Apply a border radius of 6px to the bottom corners
.blr-md border-bottom-left-radius: 6px
border-top-left-radius: 6px
Apply a border radius of 6px to the left corners
.bar-lg border-radius: 8px Apply a border radius of 8px to all corners
.btlr-lg border-top-left-radius: 8px Apply a border radius of 8px to the top left corner
.btrr-lg border-top-right-radius: 8px Apply a border radius of 8px to the top right corner
.bblr-lg border-bottom-left-radius: 8px Apply a border radius of 8px to the bottom left corner
.bbrr-lg border-bottom-right-radius: 8px Apply a border radius of 8px to the bottom right corner
.btr-lg border-top-left-radius: 8px
border-top-right-radius: 8px
Apply a border radius of 8px to the top corners
.brr-lg border-top-right-radius: 8px
border-bottom-right-radius: 8px
Apply a border radius of 8px to the right corners
.bbr-lg border-bottom-left-radius: 8px
border-bottom-right-radius: 8px
Apply a border radius of 8px to the bottom corners
.blr-lg border-bottom-left-radius: 8px
border-top-left-radius: 8px
Apply a border radius of 8px to the left corners
.bar-pill border-radius: 1000px Apply a border radius of 1000px to each corner for a 100% rounding of the left and right corners
.bar-circle border-radius: 100% Apply a border radius of 100% to each corner circular appearance
<div class="bar0">0px Border radius</div>
<div class="bar-sm">4px Border radius</div>
<div class="bar-md">6px Border radius</div>
<div class="bar-lg">8px Border radius</div>
<div class="bar-circle">Circle border radius</div>
0px Border Radius
4px Border Radius
6px Border Radius
8px Border Radius
Circle Border Radius
<div class="btlr0">0px Top Left Border Radius</div>
<div class="btlr-sm">4px Top Left Border Radius</div>
<div class="btlr-md">6px Top Left Border Radius</div>
<div class="btlr-lg">8px Top Left Border Radius</div>
0px Top Left Border Radius
4px Top Left Border Radius
6px Top Left Border Radius
8px Top Left Border Radius
<div class="btrr0">0px Top Right Border Radius</div>
<div class="btrr-sm">4px Top Right Border Radius</div>
<div class="btrr-md">6px Top Right Border Radius</div>
<div class="btrr-lg">8px Top Right Border Radius</div>
0px Top Right Border Radius
4px Top Right Border Radius
6px Top Right Border Radius
8px Top Right Border Radius
<div class="bbrr0">0px Bottom Right Border Radius</div>
<div class="bbrr-sm">4px Bottom Right Border Radius</div>
<div class="bbrr-md">6px Bottom Right Border Radius</div>
<div class="bbrr-lg">8px Bottom Right Border Radius</div>
0px Bottom Right Border Radius
4px Bottom Right Border Radius
6px Bottom Right Border Radius
8px Bottom Right Border Radius
<div class="bblr0">0px Bottom Left Border Radius</div>
<div class="bblr-sm">4px Bottom Left Border Radius</div>
<div class="bblr-md">6px Bottom Left Border Radius</div>
<div class="bblr-lg">8px Bottom Left Border Radius</div>
0px Bottom Left Border Radius
4px Bottom Left Border Radius
6px Bottom Left Border Radius
8px Bottom Left Border Radius
<div class="btr0">0px Top Border Radius</div>
<div class="btr-sm">4px Top Border Radius</div>
<div class="btr-md">6px Top Border Radius</div>
<div class="btr-lg">8px Top Border Radius</div>
0px Top Border Radius
4px Top Border Radius
6px Top Border Radius
8px Top Border Radius
<div class="bbr0">0px Bottom Border Radius</div>
<div class="bbr-sm">4px Bottom Border Radius</div>
<div class="bbr-md">6px Bottom Border Radius</div>
<div class="bbr-lg">8px Bottom Border Radius</div>
0px Bottom Border Radius
4px Bottom Border Radius
6px Bottom Border Radius
8px Bottom Border Radius
<div class="blr0">0px Left Border Radius</div>
<div class="blr-sm">4px Left Border Radius</div>
<div class="blr-md">6px Left Border Radius</div>
<div class="blr-lg">8px Left Border Radius</div>
0px Left Border Radius
4px Left Border Radius
6px Left Border Radius
8px Left Border Radius
<div class="brr0">0px Right Border Radius</div>
<div class="brr-sm">4px Right Border Radius</div>
<div class="brr-md">6px Right Border Radius</div>
<div class="brr-lg">8px Right Border Radius</div>
0px Right Border Radius
4px Right Border Radius
6px Right Border Radius
8px Right Border Radius
Deploys by Netlify