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
Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.
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.
Radzen Blazor for Visual Studio
Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT