Border radius

Stacks provides atomic classes for border radius.

Classes

Abbreviation	Output	Definition
`.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 Examples

All corners

Section titled All corners

<!-- 0px Border radius -->
<div class="bar0"></div>

<!-- 10px Border radius -->
<div class="bar-md"></div>

<!-- Circle Border radius -->
<div class="bar-circle"></div>

<!-- 1000px Border radius -->
<div class="bar-pill"></div>

.bar0

.bar-md

.bar-circle

.bar-pill

Top left corner

Section titled Top left corner

<!-- 0px Top Left Border Radius -->
<div class="btlr0"></div>

<!-- 10px Top Left Border Radius -->
<div class="btlr-md"></div>

.btlr0

.btlr-md

Top right corner

Section titled Top right corner

<!-- 0px Top Right Border Radius -->
<div class="btrr0"></div>

<!-- 10px Top Right Border Radius -->
<div class="btrr-md"></div>

.btrr0

.btrr-md

Bottom right corner

Section titled Bottom right corner

<!-- 0px Bottom Right Border Radius -->
<div class="bbrr0"></div>

<!-- 10px Bottom Right Border Radius -->
<div class="bbrr-md"></div>

.bbrr0

.bbrr-md

Bottom left corner

Section titled Bottom left corner

<!-- 0px Bottom Left Border Radius -->
<div class="bblr0"></div>

<!-- 10px Bottom Left Border Radius -->
<div class="bblr-md"></div>

.bblr0

.bblr-md

Top corners

Section titled Top corners

<!-- 0px Top Border Radius -->
<div class="btr0"></div>

<!-- 10px Top Border Radius -->
<div class="btr-md"></div>

.btr0

.btr-md

Bottom corners

Section titled Bottom corners

<!-- 0px Bottom Border Radius -->
<div class="bbr0"></div>

<!-- 10px Bottom Border Radius -->
<div class="bbr-md"></div>

.bbr0

.bbr-md

Left corners

Section titled Left corners

<!-- 0px Left Border Radius -->
<div class="blr0"></div>

<!-- 10px Left Border Radius -->
<div class="blr-md"></div>

.blr0

.blr-md

Right corners

Section titled Right corners

<!-- 0px Right Border Radius -->
<div class="brr0"></div>

<!-- 10px Right Border Radius -->
<div class="brr-md"></div>

.brr0

.brr-md