Building Materials Marketplace

Borders

    <MudPaper Elevation="0" Class="border border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border-t border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border-r border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border-b border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border-l border-container" Square="true"></MudPaper>

Remove Borders

    <MudPaper Elevation="0" Class="border-0 border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-t-0 border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-r-0 border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-b-0 border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-l-0 border-container" Square="true"></MudPaper>

Border Widths

    <MudPaper Elevation="0" Class="border-1 border border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border-2  border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border-3 border border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border-4  border-container" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border-5 border border-container" Square="true"></MudPaper>

Border Colors

    <MudPaper Elevation="0" Class="border border-container mud-border-primary" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-container mud-border-secondary" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-container mud-border-success" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-container mud-border-error" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-container mud-border-warning" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-container mud-border-info" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-container mud-border-light" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-container mud-border-dark" Square="true"></MudPaper>
    <MudPaper Elevation="0" Class="border border-container mud-border-white" Square="true"></MudPaper>

Border Color Styling

Email Address

Below Shows Danger Border

Customizing borders with background colors

<div class="mb-4">
<MudText Class="fw-semibold mb-2">Email Address</MudText>
<MudInput Value="@("")" Placeholder="name@example.com" Underline="false" Class="form-control mud-border-success" />
</div>
<MudPaper Typo="Typo.h5" Class="border-b mud-border-error pb-3 mb-4 mud-error-text" Square="true">
    Below Shows Danger Border
</MudPaper>
<MudPaper
   Class="bg-info bg-opacity-10 border mud-border-info border-l-0 rounded-e pa-3 mb-1 fs-13" Square="true">
    Customizing borders with backgrounud colors
</MudPaper>

Border with Opacity

This is default success border

This is 75% opacity success border

This is 50% opacity success border

This is 25% opacity success border

This is 10% opacity success border

<MudPaper class="border mud-border-success pa-2 mb-2 mud-elevation-0">This is default success border</MudPaper>
    <MudPaper class="border mud-border-success border-opacity-75 pa-2 mb-2 mud-elevation-0">This is 75%
        opacity
        success border
    </MudPaper>
    <MudPaper class="border mud-border-success border-opacity-50 pa-2 mb-2 mud-elevation-0">This is 50%
        opacity
        success border
    </MudPaper>
    <MudPaper class="border mud-border-success border-opacity-25 pa-2 mb-2 mud-elevation-0">This is 25%
        opacity
        success border
    </MudPaper>
    <MudPaper class="border mud-border-success border-opacity-10 pa-2 mb-2 mud-elevation-0">This is 10% opacity
        success
        border
    </MudPaper>

Border Radius

     <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded" Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-t" Alt="..." Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-e" Alt="..." Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-b" Alt="..." Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-l" Alt="..." Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-circle" Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-pill" Alt="...">

Sizes

     <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-0" Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-sm" Alt="..." Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded" Alt="..." Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-lg" Alt="..." Alt="...">
    <MudImage Src="../assets/images/media/media-58.jpg" Class="bd-placeholder-img rounded-xl" Alt="..." Alt="...">