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.
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-2025 Radzen.
Source Code licensed under
MIT