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)"

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

Source Code licensed under MIT

An error has occurred. This application may no longer respond until reloaded. Reload 🗙