Default Radius
When using the classes without any size ending it will apply the set themes 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>