Border radius

Stacks provides atomic classes for border radius.

Classes

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: 3px Apply a border radius of 3px to all corners
.btlr-sm border-top-left-radius: 3px Apply a border radius of 3px to the top left corner
.btrr-sm border-top-right-radius: 3px Apply a border radius of 3px to the top right corner
.bblr-sm border-bottom-left-radius: 3px Apply a border radius of 3px to the bottom left corner
.bbrr-sm border-bottom-right-radius: 3px Apply a border radius of 3px to the bottom right corner
.btr-sm border-top-left-radius: 3px
border-top-right-radius: 3px
Apply a border radius of 3px to the top corners
.brr-sm border-top-right-radius: 3px
border-bottom-right-radius: 3px
Apply a border radius of 3px to the right corners
.bbr-sm border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
Apply a border radius of 3px to the bottom corners
.blr-sm border-bottom-left-radius: 3px
border-top-left-radius: 3px
Apply a border radius of 3px to the left corners
.bar-md border-radius: 5px Apply a border radius of 5px to all corners
.btlr-md border-top-left-radius: 5px Apply a border radius of 5px to the top left corner
.btrr-md border-top-right-radius: 5px Apply a border radius of 5px to the top right corner
.bblr-md border-bottom-left-radius: 5px Apply a border radius of 5px to the bottom left corner
.bbrr-md border-bottom-right-radius: 5px Apply a border radius of 5px to the bottom right corner
.btr-md border-top-left-radius: 5px
border-top-right-radius: 5px
Apply a border radius of 5px to the top corners
.brr-md border-top-right-radius: 5px
border-bottom-right-radius: 5px
Apply a border radius of 5px to the right corners
.bbr-md border-bottom-left-radius: 5px
border-bottom-right-radius: 5px
Apply a border radius of 5px to the bottom corners
.blr-md border-bottom-left-radius: 5px
border-top-left-radius: 5px
Apply a border radius of 5px to the left corners
.bar-lg border-radius: 7px Apply a border radius of 7px to all corners
.btlr-lg border-top-left-radius: 7px Apply a border radius of 7px to the top left corner
.btrr-lg border-top-right-radius: 7px Apply a border radius of 7px to the top right corner
.bblr-lg border-bottom-left-radius: 7px Apply a border radius of 7px to the bottom left corner
.bbrr-lg border-bottom-right-radius: 7px Apply a border radius of 7px to the bottom right corner
.btr-lg border-top-left-radius: 7px
border-top-right-radius: 7px
Apply a border radius of 7px to the top corners
.brr-lg border-top-right-radius: 7px
border-bottom-right-radius: 7px
Apply a border radius of 7px to the right corners
.bbr-lg border-bottom-left-radius: 7px
border-bottom-right-radius: 7px
Apply a border radius of 7px to the bottom corners
.blr-lg border-bottom-left-radius: 7px
border-top-left-radius: 7px
Apply a border radius of 7px 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

Examples

All corners

1
2
3
4
5
<div class="bar0">0px Border radius</div>
<div class="bar-sm">3px Border radius</div>
<div class="bar-md">5px Border radius</div>
<div class="bar-lg">7px Border radius</div>
<div class="bar-circle">Circle border radius</div>
0px Border Radius
3px Border Radius
5px Border Radius
7px Border Radius
Circle Border Radius

Top left corner

1
2
3
4
<div class="btlr0">0px Top Left Border Radius</div>
<div class="btlr-sm">3px Top Left Border Radius</div>
<div class="btlr-md">5px Top Left Border Radius</div>
<div class="btlr-lg">7px Top Left Border Radius</div>
0px Top Left Border Radius
3px Top Left Border Radius
5px Top Left Border Radius
7px Top Left Border Radius

Top right corner

1
2
3
4
<div class="btrr0">0px Top Right Border Radius</div>
<div class="btrr-sm">3px Top Right Border Radius</div>
<div class="btrr-md">5px Top Right Border Radius</div>
<div class="btrr-lg">7px Top Right Border Radius</div>
0px Top Right Border Radius
3px Top Right Border Radius
5px Top Right Border Radius
7px Top Right Border Radius

Bottom right corner

1
2
3
4
<div class="bbrr0">0px Bottom Right Border Radius</div>
<div class="bbrr-sm">3px Bottom Right Border Radius</div>
<div class="bbrr-md">5px Bottom Right Border Radius</div>
<div class="bbrr-lg">7px Bottom Right Border Radius</div>
0px Bottom Right Border Radius
3px Bottom Right Border Radius
5px Bottom Right Border Radius
7px Bottom Right Border Radius

Bottom left corner

1
2
3
4
<div class="bblr0">0px Bottom Left Border Radius</div>
<div class="bblr-sm">3px Bottom Left Border Radius</div>
<div class="bblr-md">5px Bottom Left Border Radius</div>
<div class="bblr-lg">7px Bottom Left Border Radius</div>
0px Bottom Left Border Radius
3px Bottom Left Border Radius
5px Bottom Left Border Radius
7px Bottom Left Border Radius

Top corners

1
2
3
4
<div class="btr0">0px Top Border Radius</div>
<div class="btr-sm">3px Top Border Radius</div>
<div class="btr-md">5px Top Border Radius</div>
<div class="btr-lg">7px Top Border Radius</div>
0px Top Border Radius
3px Top Border Radius
5px Top Border Radius
7px Top Border Radius

Bottom corners

1
2
3
4
<div class="bbr0">0px Bottom Border Radius</div>
<div class="bbr-sm">3px Bottom Border Radius</div>
<div class="bbr-md">5px Bottom Border Radius</div>
<div class="bbr-lg">7px Bottom Border Radius</div>
0px Bottom Border Radius
3px Bottom Border Radius
5px Bottom Border Radius
7px Bottom Border Radius

Left corners

1
2
3
4
<div class="blr0">0px Left Border Radius</div>
<div class="blr-sm">3px Left Border Radius</div>
<div class="blr-md">5px Left Border Radius</div>
<div class="blr-lg">7px Left Border Radius</div>
0px Left Border Radius
3px Left Border Radius
5px Left Border Radius
7px Left Border Radius

Right corners

1
2
3
4
<div class="brr0">0px Right Border Radius</div>
<div class="brr-sm">3px Right Border Radius</div>
<div class="brr-md">5px Right Border Radius</div>
<div class="brr-lg">7px Right Border Radius</div>
0px Right Border Radius
3px Right Border Radius
5px Right Border Radius
7px Right Border Radius