This is a preview, you can find the current version here.
Last updated: 12/5/2025
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-md | border-radius: 10px | Apply a border radius of 10px to all corners | |
btlr-md | border-top-left-radius: 10px | Apply a border radius of 10px to the top left corner | |
btrr-md | border-top-right-radius: 10px | Apply a border radius of 10px to the top right corner | |
bblr-md | border-bottom-left-radius: 10px | Apply a border radius of 10px to the bottom left corner | |
bbrr-md | border-bottom-right-radius: 10px | Apply a border radius of 10px to the bottom right corner | |
btr-md | border-top-left-radius: 10px; border-top-right-radius: 10px | Apply a border radius of 10px to the top corners | |
brr-md | border-top-right-radius: 10px; border-bottom-right-radius: 10px | Apply a border radius of 10px to the right corners | |
bbr-md | border-bottom-left-radius: 10px; border-bottom-right-radius: 10px | Apply a border radius of 10px to the bottom corners | |
blr-md | border-bottom-left-radius: 10px; border-top-left-radius: 10px | Apply a border radius of 10px 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
<div class="bar0">0px Border radius</div>
<div class="bar-md">10px Border radius</div>
<div class="bar-circle">Circle Border radius</div>
<div class="bar-pill">1000px Border radius</div>Top left corner
<div class="btlr0">0px Top Left Border Radius</div>
<div class="btlr-md">10px Top Left Border Radius</div>0px Top Left Border Radius
10px Top Left Border Radius
Top right corner
<div class="btrr0">0px Top Right Border Radius</div>
<div class="btrr-md">10px Top Right Border Radius</div>0px Top Right Border Radius
10px Top Right Border Radius
Bottom right corner
<div class="bbrr0">0px Bottom Right Border Radius</div>
<div class="bbrr-md">10px Bottom Right Border Radius</div>0px Bottom Right Border Radius
10px Bottom Right Border Radius
Bottom left corner
<div class="bblr0">0px Bottom Left Border Radius</div>
<div class="bblr-md">10px Bottom Left Border Radius</div>0px Bottom Left Border Radius
10px Bottom Left Border Radius
Top corners
<div class="btr0">0px Top Border Radius</div>
<div class="btr-md">10px Top Border Radius</div>0px Top Border Radius
10px Top Border Radius
Bottom corners
<div class="bbr0">0px Bottom Border Radius</div>
<div class="bbr-md">10px Bottom Border Radius</div>0px Bottom Border Radius
10px Bottom Border Radius
Left corners
<div class="blr0">0px Left Border Radius</div>
<div class="blr-md">10px Left Border Radius</div>0px Left Border Radius
10px Left Border Radius
Right corners
<div class="brr0">0px Right Border Radius</div>
<div class="brr-md">10px Right Border Radius</div>0px Right Border Radius
10px Right Border Radius