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>
Different strengths
.rounded-0
.rounded-sm
.rounded
.rounded-lg
.rounded-xl
<div class="mud-theme-primary py-4 px-6 mx-4 rounded-0"> <MudText Align="Align.Center">.rounded-0</MudText> </div> <div class="mud-theme-secondary py-4 px-6 mx-4 rounded-sm"> <MudText Align="Align.Center">.rounded-sm</MudText> </div> <div class="mud-theme-tertiary py-4 px-6 mx-4 rounded"> <MudText Align="Align.Center">.rounded</MudText> </div> <div class="mud-theme-info py-4 px-6 mx-4 rounded-lg"> <MudText Align="Align.Center">.rounded-lg</MudText> </div> <div class="mud-theme-primary py-4 px-6 mx-4 rounded-xl"> <MudText Align="Align.Center">.rounded-xl</MudText> </div>
Rounding Sides
.rounded-t-xl
.rounded-r-xl
.rounded-b-xl
.rounded-l-xl
<div class="mud-theme-primary py-4 px-6 mx-4 rounded-t-xl"> <MudText Align="Align.Center">.rounded-t-xl</MudText> </div> <div class="mud-theme-secondary py-4 px-6 mx-4 rounded-r-xl"> <MudText Align="Align.Center">.rounded-r-xl</MudText> </div> <div class="mud-theme-tertiary py-4 px-6 mx-4 rounded-b-xl"> <MudText Align="Align.Center">.rounded-b-xl</MudText> </div> <div class="mud-theme-info py-4 px-6 mx-4 rounded-l-xl"> <MudText Align="Align.Center">.rounded-l-xl</MudText> </div>
Rounding Corners
.rounded-tl-xl
.rounded-tr-xl
.rounded-br-xl
.rounded-bl-xl
<div class="mud-theme-info py-4 px-6 mx-4 rounded-tl-xl"> <MudText Align="Align.Center">.rounded-tl-xl</MudText> </div> <div class="mud-theme-tertiary py-4 px-6 mx-4 rounded-tr-xl"> <MudText Align="Align.Center">.rounded-tr-xl</MudText> </div> <div class="mud-theme-secondary py-4 px-6 mx-4 rounded-br-xl"> <MudText Align="Align.Center">.rounded-br-xl</MudText> </div> <div class="mud-theme-primary py-4 px-6 mx-4 rounded-bl-xl"> <MudText Align="Align.Center">.rounded-bl-xl</MudText> </div>