Borders
Border
When set, all borders default to a 1px width which can be offset using border--width-{ i }.
Class
| Class | Result |
|---|---|
border | Set border. |
no-border | Remove border. |
border-x | Set x-axis borders (left and right). |
border-y | Set y-axis borders (top and bottom). |
border-t | Set top border. |
border-b | Set bottom border. |
border-r | Set right border. |
border-l | Set left border. |
border--width-{ 1-5 } | Set custom border width. |
border--color-{ color } | Set border color. |
Visualizer
Try this!See how to use the border utilities!
Border Radius
You can add a border radius utility to any element.
Class
| Class | Result |
|---|---|
rounded-0 | border-radius: 0 |
rounded-1 | border-radius: .25rem |
rounded-2 | border-radius: .5rem |
rounded-3 | border-radius: 1rem |
rounded-4 | border-radius: 2rem |
rounded-5 | border-radius: 3rem |
rounded-6 | border-radius: 4.5rem |
rounded-7 | border-radius: 6.5rem |
Visualizer
Try this!Change the border-radius of the card
Specific Corners
You can specify a border-radius on a certain corner of an element. Just be sure to add the corner you want. It looks like this:
rounded-tr--2. This would add border-top-right-radius: .5rem.