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-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
Section titled ExamplesAll corners
Section titled 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
Section titled 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
Section titled 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
Section titled 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
Section titled 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
Section titled 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
Section titled 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
Section titled 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
Section titled 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
