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: 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
Section titled ExamplesAll corners
Section titled All corners<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>Top left corner
Section titled Top left corner<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
Section titled Top right corner<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
Section titled Bottom right corner<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
Section titled Bottom left corner<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
Section titled Top corners<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
Section titled Bottom corners<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
Section titled Left corners<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
Section titled Right corners<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