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 |
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)"
Supercharge your Blazor development with Radzen Blazor Studio
Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT