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 for a circular appearance

Examples

All corners

<div class="bar0">…</div>
<div class="bar-md">…</div>
<div class="bar-circle">…</div>
<div class="bar-pill">…</div>

.bar0

.bar-md

.bar-circle

.bar-pill

Top left corner

<div class="btlr0">…</div>
<div class="btlr-md">…</div>

.btlr0

.btlr-md

Top right corner

<div class="btrr0">…</div>
<div class="btrr-md">…</div>

.btrr0

.btrr-md

Bottom right corner

<div class="bbrr0">…</div>
<div class="bbrr-md">…</div>

.bbrr0

.bbrr-md

Bottom left corner

<div class="bblr0">…</div>
<div class="bblr-md">…</div>

.bblr0

.bblr-md

Top corners

<div class="btr0">…</div>
<div class="btr-md">…</div>

.btr0

.btr-md

Bottom corners

<div class="bbr0">…</div>
<div class="bbr-md">…</div>

.bbr0

.bbr-md

Left corners

<div class="blr0">…</div>
<div class="blr-md">…</div>

.blr0

.blr-md

Right corners

<div class="brr0">…</div>
<div class="brr-md">…</div>

.brr0

.brr-md