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.