Border Radius

Use border classes to quickly change border-radius.

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>

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.3

An unhandled error has occurred. Reload 🗙