GitHub

Borders

Border styles and utility CSS classes.

Border-radius

Use these CSS classes to set border-radius to an element e.g. class="rz-border-radius-6".

Border-radius value
CSS class
CSS variable
theme specific .rz-border-radius --rz-border-radius
0 .rz-border-radius-0 --rz-border-radius-0
0.25rem .rz-border-radius-1 --rz-border-radius-1
0.5rem .rz-border-radius-2 --rz-border-radius-2
0.75rem .rz-border-radius-3 --rz-border-radius-3
1rem .rz-border-radius-4 --rz-border-radius-4
1.25rem .rz-border-radius-5 --rz-border-radius-5
1.5rem .rz-border-radius-6 --rz-border-radius-6
1.75rem .rz-border-radius-7 --rz-border-radius-7
2rem .rz-border-radius-8 --rz-border-radius-8
2.25rem .rz-border-radius-9 --rz-border-radius-9
2.5rem .rz-border-radius-10 --rz-border-radius-10

Border utility CSS classes

The following CSS classes add 1px solid border with its respective color. E.g. class="rz-border-primary".

.rz-border-white
.rz-border-base-50
.rz-border-base-100
.rz-border-base-200
.rz-border-base-300
.rz-border-base-400
.rz-border-base-500
.rz-border-base-600
.rz-border-base-700
.rz-border-base-800
.rz-border-base-900
.rz-border-black
.rz-border-primary-lighter
.rz-border-primary-light
.rz-border-primary
.rz-border-primary-dark
.rz-border-primary-darker
.rz-border-secondary-lighter
.rz-border-secondary-light
.rz-border-secondary
.rz-border-secondary-dark
.rz-border-secondary-darker
.rz-border-info-lighter
.rz-border-info-light
.rz-border-info
.rz-border-info-dark
.rz-border-info-darker
.rz-border-success-lighter
.rz-border-success-light
.rz-border-success
.rz-border-success-dark
.rz-border-success-darker
.rz-border-warning-lighter
.rz-border-warning-light
.rz-border-warning
.rz-border-warning-dark
.rz-border-warning-darker
.rz-border-danger-lighter
.rz-border-danger-light
.rz-border-danger
.rz-border-danger-dark
.rz-border-danger-darker

Borders with CSS variables

Use theme color variables when defining borders. See theme colors

style="border: 10px dotted var(--rz-success)"

Source Code licensed under MIT