Rounded corners
Most form elements come with this already, making its applicability limited beyond background elements.
| Class | Declaration | Usage |
|---|---|---|
| rad-a2px | border-radius: 2px; |
Sets border radius of all corners to 2px. Standard for boxes that are not attached to other elements. |
|
rad-t2px rad-b2px |
border-[side]-[side]-radius: 2px;
|
Border radius for top or bottom corners. Useful if the element is attached to another and the two should apear as a whole. |
|
rad-tl2px rad-tr2px rad-br2px rad-bl2px |
border-[side]-[side]-radius: 2px; |
Border radius for individual corners. Same use cases as for the top and bottom classes. |
Examples
<div class="bg-gray1 rad-a2px paxl mrs"></div>
<div class="bg-gray2 rad-a2px paxl mrs"></div>
<div class="bg-gray4 rad-a2px paxl mrs"></div>
<div class="bg-green1 rad-a2px paxl"></div><div class="bg-gray2 rad-t2px paxl maxw16r"></div>
<div class="bg-gray4 rad-b2px paxl maxw16r"></div>