Radzen Blazor Components

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

Boost your Blazor development with
Radzen Studio

Radzen Studio is a desktop tool that gives you the power to create line of business applications. Build and launch Blazor apps visually, while we generate clean code for you.

Learn More Download Radzen