Borders
Border width, radius, blobs, and a very smart conditional radius.
Border thickness
5 props and 25 classes to define border thickness.
--o-border-size-1
o-border-1
--o-border-size-2
o-border-2
--o-border-size-3
o-border-3
--o-border-size-4
o-border-4
--o-border-size-5
o-border-5
o-border-top-1
o-border-bottom-3
o-border-left-5
o-border-top-2
o-border-right-3
o-border-bottom-4
o-border-left-5
The props:
--o-border-size-1
--o-border-size-2
--o-border-size-3
--o-border-size-4
--o-border-size-5
The classes:
o-border-1
o-border-2
o-border-3
o-border-4
o-border-5
Top border:
o-border-top-1
o-border-top-2
o-border-top-3
o-border-top-4
o-border-top-5
Right border:
o-border-right-1
o-border-right-2
o-border-right-3
o-border-right-4
o-border-right-5
Bottom border:
o-border-bottom-1
o-border-bottom-2
o-border-bottom-3
o-border-bottom-4
o-border-bottom-5
Left border:
o-border-left-1
o-border-left-2
o-border-left-3
o-border-left-4
o-border-left-5
Border radius
7 props and 63 classes to define border radius.
You can round all corners at once, the 2 corners on one side, or individual corners.
--o-radius-1
o-radius-1
--o-radius-2
o-radius-2
--o-radius-3
o-radius-3
--o-radius-4
o-radius-4
--o-radius-5
o-radius-5
--o-radius-6
o-radius-6
--o-radius-round
o-radius-round
o-radius-left-1
o-radius-right-3
o-radius-top-round
o-radius-top-round
o-radius-bottom-left-round
o-radius-bottom-right-round
o-radius-top-right-6
o-radius-bottom-left-6
The props:
--o-radius-1
--o-radius-2
--o-radius-3
--o-radius-4
--o-radius-5
--o-radius-6
--o-radius-round
The classes:
o-radius-1
o-radius-2
o-radius-3
o-radius-4
o-radius-5
o-radius-6
o-radius-round
Top corners:
o-radius-top-1
o-radius-top-2
o-radius-top-3
o-radius-top-4
o-radius-top-5
o-radius-top-6
o-radius-top-round
Right corners:
o-radius-right-1
o-radius-right-2
o-radius-right-3
o-radius-right-4
o-radius-right-5
o-radius-right-6
o-radius-right-round
Bottom corners:
o-radius-bottom-1
o-radius-bottom-2
o-radius-bottom-3
o-radius-bottom-4
o-radius-bottom-5
o-radius-bottom-6
o-radius-bottom-round
Left corners:
o-radius-left-1
o-radius-left-2
o-radius-left-3
o-radius-left-4
o-radius-left-5
o-radius-left-6
o-radius-left-round
Top Left corners:
o-radius-top-left-1
o-radius-top-left-2
o-radius-top-left-3
o-radius-top-left-4
o-radius-top-left-5
o-radius-top-left-6
o-radius-top-left-round
Top Right corners:
o-radius-top-right-1
o-radius-top-right-2
o-radius-top-right-3
o-radius-top-right-4
o-radius-top-right-5
o-radius-top-right-6
o-radius-top-right-round
Bottom Left corners:
o-radius-bottom-left-1
o-radius-bottom-left-2
o-radius-bottom-left-3
o-radius-bottom-left-4
o-radius-bottom-left-5
o-radius-bottom-left-6
o-radius-bottom-left-round
Bottom Right corners:
o-radius-bottom-right-1
o-radius-bottom-right-2
o-radius-bottom-right-3
o-radius-bottom-right-4
o-radius-bottom-right-5
o-radius-bottom-right-6
o-radius-bottom-right-round
Blobs
5 props and 5 classes to easily create blobs.
--o-radius-blob-1
o-blob-1
--o-radius-blob-2
o-blob-2
--o-radius-blob-3
o-blob-3
--o-radius-blob-4
o-blob-4
--o-radius-blob-5
o-blob-5
The props:
--o-radius-blob-1
--o-radius-blob-2
--o-radius-blob-3
--o-radius-blob-4
--o-radius-blob-5
The classes:
o-blob-1
o-blob-2
o-blob-3
o-blob-4
o-blob-5
Conditional border radius
6 props and 54 classes to define conditional border radius.
The conditional radius makes the radius disappear when the element width reaches 100% of the viewport width.
Use your dev tools in responsive mode to reduce your viewport width until I reach 100vw. Look at my corners!
--o-radius-conditional-3
o-radius-conditional-3
The props:
--o-radius-conditional-1
--o-radius-conditional-2
--o-radius-conditional-3
--o-radius-conditional-4
--o-radius-conditional-5
--o-radius-conditional-6
The classes:
o-radius-conditional-1
o-radius-conditional-2
o-radius-conditional-3
o-radius-conditional-4
o-radius-conditional-5
o-radius-conditional-6
Top corners:
o-radius-top-conditional-1
o-radius-top-conditional-2
o-radius-top-conditional-3
o-radius-top-conditional-4
o-radius-top-conditional-5
o-radius-top-conditional-6
Right corners:
o-radius-right-conditional-1
o-radius-right-conditional-2
o-radius-right-conditional-3
o-radius-right-conditional-4
o-radius-right-conditional-5
o-radius-right-conditional-6
Bottom corners:
o-radius-bottom-conditional-1
o-radius-bottom-conditional-2
o-radius-bottom-conditional-3
o-radius-bottom-conditional-4
o-radius-bottom-conditional-5
o-radius-bottom-conditional-6
Left corners:
o-radius-left-conditional-1
o-radius-left-conditional-2
o-radius-left-conditional-3
o-radius-left-conditional-4
o-radius-left-conditional-5
o-radius-left-conditional-6
Top Left corners:
o-radius-top-left-conditional-1
o-radius-top-left-conditional-2
o-radius-top-left-conditional-3
o-radius-top-left-conditional-4
o-radius-top-left-conditional-5
o-radius-top-left-conditional-6
Top Right corners:
o-radius-top-right-conditional-1
o-radius-top-right-conditional-2
o-radius-top-right-conditional-3
o-radius-top-right-conditional-4
o-radius-top-right-conditional-5
o-radius-top-right-conditional-6
Bottom Left corners:
o-radius-bottom-left-conditional-1
o-radius-bottom-left-conditional-2
o-radius-bottom-left-conditional-3
o-radius-bottom-left-conditional-4
o-radius-bottom-left-conditional-5
o-radius-bottom-left-conditional-6
Bottom Right corners:
o-radius-bottom-right-conditional-1
o-radius-bottom-right-conditional-2
o-radius-bottom-right-conditional-3
o-radius-bottom-right-conditional-4
o-radius-bottom-right-conditional-5
o-radius-bottom-right-conditional-6