Sections
Border radius
Stacks provides atomic classes for border radius.
Classes
Section titled 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: 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 |
Examples
Section titled ExamplesAll corners
Section titled All corners<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>Top left corner
Section titled Top left corner<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
Top right corner
Section titled Top right corner<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
Bottom right corner
Section titled Bottom right corner<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
Bottom left corner
Section titled Bottom left corner<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
Top corners
Section titled Top corners<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
Bottom corners
Section titled Bottom corners<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
Left corners
Section titled Left corners<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
Right corners
Section titled Right corners<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
