Border Radius - MudBlazor

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>