Borders
Border styles and utility CSS classes.
This page showcases border styling with radius classes (rz-border-radius-0 through rz-border-radius-10) and corresponding CSS variables, utilities to add/remove borders on specific sides (rz-border-top/right/bottom/left), border color classes with theme colors, shorthand border classes combining border and color, and border width customization using --rz-border-width CSS variable.
Styling borders in Radzen Blazor Studio link
This video shows how to apply and customize borders in your Blazor applications using Radzen Blazor Studio.
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 |
Add or remove borders arbitrarily link
The following CSS classes help you add or remove borders. For example class="rz-border-right" adds a solid border with the theme's base color to the right side of an element. Use rz-{border-side}-0 to remove a border.
Border color utility CSS classes link
The following CSS classes help you add color to a border. For example class="rz-border-right rz-border-color-success" adds a solid border with the theme's success color to the right side of an element.
Border with color utility CSS classes link
The following CSS classes add a border with its respective color on all sides of an element. E.g. class="rz-border-primary". You can think of it as the shorthand of class="rz-border rz-border-color-primary"
Set border width via CSS variable link
Use --rz-border-width CSS variable to set the width of a border.
Apply to a single element:
Apply to a group of elements:
Borders with CSS variables link
Use theme color variables when defining borders. See theme colors
style="border: 10px dotted var(--rz-success)"
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT