Border

use .border to add 1px solid border with default gray color. 

<div class="border h-10"></div>

or use .border-{color} for colored border.

<div class="border-red-dark h-10"></div>

Border Radius

For border-radius: size use shorthand class .br-{size}.
Note: .br-none and .br-0 are the same

Example Class
.br-none
.br-0
.br-1
.br-2
.br-3
.br-4
.br-6
.br-8
.br-12
.br-16
.br-round

Border Radius Position

For border-radius-{position}: {size} use shorthand class .br-{position}-{size}.
Here position are: t, r, b, l for top, right, bottom, and left respectively

Border Radius Position Class
.br-t-8
.br-r-8
.br-b-8
.br-l-8

Border Radius Responsive

Border radius is responsive. You can use shorthand .{sm|md|lg}-br-{t|r|b|l}-{size}

Border Width

For border-width: {size} use shorthand class .bw-{size}.

Border Width Class
.bw-0
.bw-1
.bw-2
.bw-3
.bw-4
.bw-6
.bw-8
.bw-12
.bw-16

Border Color

For border-color: {color} use shorthand class .bc-{color}.
See full color references

Border Color Class
.bc-blue
.bc-blue-lighter
.bc-indigo
.bc-purple
.bc-pink
.bc-red
.bc-green
.bc-gray
.bc-black
Border color works on hover and focus also. Use class .hover-bc-{color} and .focus-bc-{color}
<input type="text" class="hover-bc-blue focus-bc-red">

Gradient Border Color

We don't have shorthand class for gradient border color but you can use gradient background and solid background over it to create gradient border.
See full gradient color references 

<div class="purple-yellow p-1">
    <div class="bg-white h-8"></div>
</div>
<div class="purple-yellow p-1px">
    <div class="bg-white h-8"></div>
</div>