Radzen Blazor Components

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

Border utility CSS classes link

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 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.

open_in_new Learn More
>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Fluent
  • Material 3 Dark
  • Material Dark
  • Fluent Dark

Free Themes

  • Material
  • Standard
  • Default
  • Humanistic
  • Software
  • Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙