<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "Borders"; include('partials/app-meta-title.php'); ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "Borders"; $pageSubTitle1 = "Design"; $pageSubTitle2 = "System Utilities"; $pageSubText = "Bootstrap borders are utility classes that allow you to quickly add, remove, or modify borders on elements with predefined styles, colors, and widths."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">

                        <div class="row">
                            <div class="col-xl-6">
                                <!--Colorful Borders-->
                                <div id="panel-1" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Colorful <span class="fw-300"><i>borders</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Use color profiles to the following border colors <code>,border-primary</code>, <code>.border-secondary</code>, <code>.border-success</code>, <code>.border-danger</code>, <code>.border-warning</code>, <code>.border-info</code>, <code>.border-light</code>, <code>.border-dark</code>, <code>.border-white</code>, <code>.border-transparent</code>, <code>.border-faded</code>
                                            </div>
                                            <div class="demo d-flex flex-wrap justify-content-evenly gap-1">
                                                <div class="border border-primary width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-primary-subtle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-secondary width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-secondary-subtle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-success width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-success-subtle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-danger width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-danger-subtle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-warning width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-warning-subtle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-info width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-info-subtle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-light width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-light-subtle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-dark width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-dark-subtle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-black width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-white width-10 height-10 d-inline-block bg-faded"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Add Borders-->
                                <div id="panel-2" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Add <span class="fw-300"><i>Borders</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add border using <code>.border</code>, <code>.border-top</code>, <code>.border-end</code>, <code>.border-end</code>, <code>.border-bottom</code>, <code>.border-start</code>
                                            </div>
                                            <div class="demo d-flex flex-wrap justify-content-evenly justify-content-md-start gap-1">
                                                <div class="border width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border-top width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border-end width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border-bottom width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border-start width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border rounded-circle width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border rounded width-10 height-10 d-inline-block bg-faded"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Border Opacity-->
                                <div id="panel-3" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Border <span class="fw-300"><i>Opacity</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add border using <code>.border-opacity-75</code>, <code>.border-opacity-50</code>,
                                                <code>.border-opacity-25</code>, <code>.border-opacity-10</code>.
                                            </div>
                                            <div class="demo d-flex flex-wrap justify-content-evenly justify-content-md-start gap-1">
                                                <div class="border border-primary width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-primary border-opacity-75 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-primary border-opacity-50 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-primary border-opacity-25 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-primary border-opacity-10 width-10 height-10 d-inline-block bg-faded"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Border Thickness-->
                                <div id="panel-4" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Border <span class="fw-300"><i>Thickness</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Border thickness using <code>border-1</code>, <code>border-2</code>,
                                                <code>border-3</code>, <code>border-4</code>, <code>border-5</code>.
                                            </div>
                                            <div class="demo d-flex flex-wrap justify-content-evenly justify-content-md-start gap-1">
                                                <div class="border border-1 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-2 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-3 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-4 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-5 width-10 height-10 d-inline-block bg-faded"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <!--Rounded-->
                                <div id="panel-5" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Rounded <span class="fw-300"><i>example</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Round edges or control each corner using <code>.rounded</code>, <code>rounded-top</code>, <code>rounded-end</code>, <code>rounded-bottom</code>, <code>rounded-start</code>, <code>rounded-circle</code>, <code>rounded-0</code>, <code>.rounded-plus</code>, <code>.rounded-{sm,lg}</code>, <code>.rounded-pill</code>, <code>border-{top,bottom}-{left,right}-radius-0</code>
                                            </div>
                                            <div class="demo d-flex flex-wrap justify-content-evenly justify-content-md-start gap-1">
                                                <div class="rounded bg-success-50 width-10 height-10 d-inline-block"></div>
                                                <div class="rounded-top bg-success-200 width-10 height-10 d-inline-block"></div>
                                                <div class="rounded-end bg-success-200 width-10 height-10 d-inline-block"></div>
                                                <div class="rounded-bottom bg-success-200 width-10 height-10 d-inline-block"></div>
                                                <div class="rounded-start bg-success-200 width-10 height-10 d-inline-block"></div>
                                                <div class="rounded-circle bg-danger-200 width-10 height-10 d-inline-block"></div>
                                                <div class="rounded-plus bg-danger-50 width-10 height-10 d-inline-block"></div>
                                                <div class="rounded-0 bg-primary-50 width-10 height-10 d-inline-block"></div>
                                                <div class="rounded-pill bg-info-50 width-10 height-10 d-inline-block"></div>
                                            </div>
                                            <div class="panel-tag">
                                                Control rounded depth using <code>rounded-1</code>, <code>rounded-2</code>, <code>rounded-3</code>, <code>rounded-4</code>,
                                                <code>rounded-5</code>
                                            </div>
                                            <div class="demo d-flex flex-wrap justify-content-evenly justify-content-md-start gap-1">
                                                <div class="rounded-1 width-10 height-10 d-inline-block bg-fusion-50"></div>
                                                <div class="rounded-2 width-10 height-10 d-inline-block bg-fusion-50"></div>
                                                <div class="rounded-3 width-10 height-10 d-inline-block bg-fusion-50"></div>
                                                <div class="rounded-4 width-10 height-10 d-inline-block bg-fusion-50"></div>
                                                <div class="rounded-5 width-10 height-10 d-inline-block bg-fusion-50"></div>
                                            </div>
                                            <div class="panel-tag">
                                                Mix and match rounded corners using <code>rounded-bottom-1</code>, <code>rounded-start-2</code>,
                                                <code>rounded-end-circle</code>, <code>rounded-start-pill</code>, <code>rounded-5 rounded-top-0</code>
                                            </div>
                                            <div class="demo d-flex flex-wrap justify-content-evenly justify-content-md-start gap-1">
                                                <div class="rounded-bottom-1 width-10 height-10 d-inline-block bg-fusion-50"></div>
                                                <div class="rounded-start-2 width-10 height-10 d-inline-block bg-fusion-50"></div>
                                                <div class="rounded-end-circle width-10 height-10 d-inline-block bg-fusion-50"></div>
                                                <div class="rounded-start-pill width-10 height-10 d-inline-block bg-fusion-50"></div>
                                                <div class="rounded-5 rounded-top-0 width-10 height-10 d-inline-block bg-fusion-50"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Remove borders-->
                                <div id="panel-6" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Remove <span class="fw-300"><i>borders</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Subtract borders with <code>border-0</code>, <code>border-top-0</code>, <code>border-end-0</code>, <code>border-bottom-0</code>, <code>border-start-0</code>, <code>.border-transparent</code>
                                            </div>
                                            <div class="demo d-flex flex-wrap justify-content-evenly justify-content-md-start gap-1">
                                                <div class="border-0 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-top-0 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-end-0 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-bottom-0 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border border-start-0 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border rounded-circle border-end-0 border-start-0 width-10 height-10 d-inline-block bg-faded"></div>
                                                <div class="border rounded width-10 border-end-0 border-start-0 height-10 d-inline-block bg-faded"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

</body>

</html>