| Class | Properties |
|---|---|
| rounded | border-radius: var(--mud-default-borderradius); |
| rounded-0 | border-radius: 0; |
| rounded-b | border-bottom-right-radius: var(--mud-default-borderradius); border-bottom-left-radius: var(--mud-default-borderradius); |
| rounded-b-0 | border-bottom-right-radius: 0; border-bottom-left-radius: 0; |
| rounded-bl, rounded-bs | border-bottom-left-radius: var(--mud-default-borderradius); |
| rounded-bl-0, rounded-bs-0 | border-bottom-left-radius: 0; |
| rounded-b-lg | border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; |
| rounded-bl-lg, rounded-bs-lg | border-bottom-left-radius: 8px; |
| rounded-bl-sm, rounded-bs-sm | border-bottom-left-radius: 2px; |
| rounded-bl-xl, rounded-bs-xl | border-bottom-left-radius: 24px; |
| rounded-br, rounded-be | border-bottom-right-radius: var(--mud-default-borderradius); |
| rounded-br-0, rounded-be-0 | border-bottom-right-radius: 0; |
| rounded-br-lg, rounded-be-lg | border-bottom-right-radius: 8px; |
| rounded-br-sm, rounded-be-sm | border-bottom-right-radius: 2px; |
| rounded-br-xl, rounded-be-xl | border-bottom-right-radius: 24px; |
| rounded-b-sm | border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; |
| rounded-b-xl | border-bottom-right-radius: 24px; border-bottom-left-radius: 24px; |
| rounded-circle | border-radius: 50%; |
| rounded-l, rounded-s | border-top-left-radius: var(--mud-default-borderradius); border-bottom-left-radius: var(--mud-default-borderradius); |
| rounded-l-0, rounded-s-0 | border-top-left-radius: 0; border-bottom-left-radius: 0; |
| rounded-lg | border-radius: 8px; |
| rounded-l-lg, rounded-s-lg | border-top-left-radius: 8px; border-bottom-left-radius: 8px; |
| rounded-l-sm, rounded-s-sm | border-top-left-radius: 2px; border-bottom-left-radius: 2px; |
| rounded-l-xl, rounded-s-xl | border-top-left-radius: 24px; border-bottom-left-radius: 24px; |
| rounded-pill | border-radius: 9999px; |
| rounded-r, rounded-e | border-top-right-radius: var(--mud-default-borderradius); border-bottom-right-radius: var(--mud-default-borderradius); |
| rounded-r-0, rounded-e-0 | border-top-right-radius: 0; border-bottom-right-radius: 0; |
| rounded-r-lg, rounded-e-lg | border-top-right-radius: 8px; border-bottom-right-radius: 8px; |
| rounded-r-sm, rounded-e-sm | border-top-right-radius: 2px; border-bottom-right-radius: 2px; |
| rounded-r-xl, rounded-e-xl | border-top-right-radius: 24px; border-bottom-right-radius: 24px; |
| rounded-sm | border-radius: 2px; |
| rounded-t | border-top-left-radius: var(--mud-default-borderradius); border-top-right-radius: var(--mud-default-borderradius); |
| rounded-t-0 | border-top-left-radius: 0; border-top-right-radius: 0; |
| rounded-tl, rounded-ts | border-top-left-radius: var(--mud-default-borderradius); |
| rounded-tl-0, rounded-ts-0 | border-top-left-radius: 0; |
| rounded-t-lg | border-top-left-radius: 8px; border-top-right-radius: 8px; |
| rounded-tl-lg, rounded-ts-lg | border-top-left-radius: 8px; |
| rounded-tl-sm, rounded-ts-sm | border-top-left-radius: 2px; |
| rounded-tl-xl, rounded-ts-xl | border-top-left-radius: 24px; |
| rounded-tr, rounded-te | border-top-right-radius: var(--mud-default-borderradius); |
| rounded-tr-0, rounded-te-0 | border-top-right-radius: 0; |
| rounded-tr-lg, rounded-te-lg | border-top-right-radius: 8px; |
| rounded-tr-sm, rounded-te-sm | border-top-right-radius: 2px; |
| rounded-tr-xl, rounded-te-xl | border-top-right-radius: 24px; |
| rounded-t-sm | border-top-left-radius: 2px; border-top-right-radius: 2px; |
| rounded-t-xl | border-top-left-radius: 24px; border-top-right-radius: 24px; |
| rounded-xl | border-radius: 24px; |
Default Radius
When using the classes without any size ending, it will apply the current theme's default border-radius.
.rounded
<div class="mud-theme-primary py-4 px-6 mx-4 rounded"> <MudText Align="Align.Center">.rounded</MudText> </div>
Pill and Circle
.rounded-pill
<div class="mud-theme-secondary py-4 px-6 mx-4 rounded-pill"> <MudText Align="Align.Center">.rounded-pill</MudText> </div> <div class="mud-theme-primary pa-7 rounded-circle"></div>
Remove Border Radius
.rounded-0
<div class="mud-theme-primary py-4 px-8 rounded-0"> <MudText Align="Align.Center">.rounded-0</MudText> </div>