Borders are mostly denoted with the bd utility classes. While border colors are discussed in colors, the color thickness can be applied though digits that run from 1 to 9. This means that for a border to be applied to any element, it must have the property that matches a bd- and ends with a digit (e.g 9). Hence we have a border thickness utility class that run from bd-1 to bd-9. The border thickness is defined using pixels as the thickness unit.

There are only quite a number of border radius utility classes. A part runs from rad-1 to rad-10 while the other parts include rad-12, rad-14, rad-16 rad-18 and rad-20. Each of the digit specifies the amount of radius (in pixels) that is applied on the element. Other custom radius classes are:

• rad-per-50 - radius at 50%
• rad-r - apply radius at 100vw
• rad-rl - apply radius on the left side at 100vw
• rad-rr - apply radius on the right side at 100vw
• rad-r-none - remove right radius
• rad-l-none - remove left radius
• rad-t-none - remove top radius
• rad-b-none - remove bottom radius
• rad-lt-none - remove left top radius
• rad-lb-none - remove left bottom radius
• rad-rt-none - remove right top radius
• rad-rb-none - remove right bottom radius
• rad-none - remove all border radius
• rad-f - remove all border radius (strict)

Border postions can be defined using custom classes for left, right, top or bottom

• bd-l - border left
• bd-r - border right
• bd-t - border top
• bd-b - border bottom
• bd-v - border top and bottom
• bd-x - border left and right
• bd-none - remove all borders
• bd-r-none - remove right border
• bd-l-none - remove left border
• bd-tp-none - remove top border
• bd-bm-none - remove bottom border
• bd-x-none - remove right and left border
• bd-v-none - remove top and bottom border