Documentation About Radzen
GitHub

Borders

Border styles and utility CSS classes.

Border radius link

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 link

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 link

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.
open_in_new Try Now play_circle_outline See in Action


Source Code licensed under MIT

New

Radzen
Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.

Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

open_in_new Try Now play_circle_outline See in Action
An error has occurred. This application may no longer respond until reloaded. Reload 🗙