@page "/borders"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Borders
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Border styles and utility CSS classes.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    This page showcases border styling with radius classes (<code>rz-border-radius-0</code> through <code>rz-border-radius-10</code>) and corresponding CSS variables, utilities to add/remove borders on specific sides (<code>rz-border-top/right/bottom/left</code>), border color classes with theme colors, shorthand border classes combining border and color, and border width customization using <code>--rz-border-width</code> CSS variable.
</RadzenText>

<RadzenRow>
    <RadzenColumn Size="12">
        <RadzenText Anchor="borders#video-borders" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
            Styling borders in Radzen Blazor Studio
        </RadzenText>
        <RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
            This video shows how to apply and customize borders in your Blazor applications using Radzen Blazor Studio.
        </RadzenText>
        <RadzenCard Variant="Variant.Outlined" class="rz-p-7">
            <div class="embed-container">
                <iframe src="https://www.youtube.com/embed/e2rLKIJqo2c?&rel=0" frameborder="0" allowfullscreen=""></iframe>
            </div>
        </RadzenCard>
    </RadzenColumn>
</RadzenRow>

<RadzenText Anchor="borders#border-radius" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Border radius
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use these CSS classes to set border-radius to an element e.g. <code>class="rz-border-radius-6"</code>.
</RadzenText>
<RadzenExample Example="BorderRadius">
    <BorderRadius />
</RadzenExample>

<RadzenTable class="rz-mt-4">
    <RadzenTableHeader>
        <RadzenTableHeaderRow>
            <RadzenTableHeaderCell>Border-radius value</RadzenTableHeaderCell>
            <RadzenTableHeaderCell>CSS class</RadzenTableHeaderCell>
            <RadzenTableHeaderCell>CSS variable</RadzenTableHeaderCell>
        </RadzenTableHeaderRow>
    </RadzenTableHeader>
    <RadzenTableBody>
        <RadzenTableRow>
            <RadzenTableCell>theme specific</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>0</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-0</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-0</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>0.25rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-1</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-1</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>0.5rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-2</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-2</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>0.75rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-3</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-3</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>1rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-4</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-4</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>1.25rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-5</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-5</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>1.5rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-6</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-6</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>1.75rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-7</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-7</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>2rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-8</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-8</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>2.25rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-9</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-9</RadzenTableCell>
        </RadzenTableRow>
        <RadzenTableRow>
            <RadzenTableCell>2.5rem</RadzenTableCell>
            <RadzenTableCell>.rz-border-radius-10</RadzenTableCell>
            <RadzenTableCell>--rz-border-radius-10</RadzenTableCell>
        </RadzenTableRow>
    </RadzenTableBody>
</RadzenTable>

<RadzenText Anchor="borders#add-remove-css-classes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Add or remove borders arbitrarily
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following CSS classes help you add or remove borders. For example <code>class="rz-border-right"</code> adds a solid border with the theme's base color to the right side of an element. Use <code>rz-{border-side}-0</code> to remove a border. 
</RadzenText>
<RadzenExample Example="BorderAddRemove">
    <BorderAddRemove />
</RadzenExample>

<RadzenText Anchor="borders#color-css-classes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Border color utility CSS classes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following CSS classes help you add color to a border. For example <code>class="rz-border-right rz-border-color-success"</code> adds a solid border with the theme's success color to the right side of an element.
</RadzenText>
<RadzenExample Example="BorderColor">
    <BorderColor />
</RadzenExample>

<RadzenText Anchor="borders#utility-css-classes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Border with color utility CSS classes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following CSS classes add a border with its respective color <strong>on all sides</strong> of an element. E.g. <code>class="rz-border-primary"</code>. You can think of it as the shorthand of <code>class="rz-border rz-border-color-primary"</code>
</RadzenText>
<RadzenExample Example="BorderColorAllSides">
    <BorderColorAllSides />
</RadzenExample>

<RadzenText Anchor="borders#border-width" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Set border width via CSS variable
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>--rz-border-width</code> CSS variable to set the width of a border.
</RadzenText>
<RadzenExample Example="BorderWidth">
    <BorderWidth />
</RadzenExample>

<RadzenText Anchor="borders#css-variables" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Borders with CSS variables
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use theme color variables when defining borders. <RadzenLink Path="/colors" Text="See theme colors" Target="_blank" />
</RadzenText>
<div class="rz-p-12" style="border: 10px dotted var(--rz-success)">
    <p><code>style="border: 10px dotted var(--rz-success)"</code></p>
</div>