Border

Beta Added in 2.0.0

Add or remove a border to any or all sides of an element.

Usage

Easily add borders to any element using the following utility classes. All borders applied via utility classes will have the value 1px solid #dddddd. We’ve also included an extra border utility class to add the default border-radius (.25rem/4px) to an element.

Class	Description
`.gls-border`	Adds border to all sides
`.gls-border-top`	Adds top border.
`.gls-border-bottom`	Adds bottom border.
`.gls-border-left`	Adds left border.
`.gls-border-right`	Adds right border.

<div class="gls-border"></div>

- Border top
- Border right
- Border bottom
- Border left
- Border all
- Border radius

<ul class="gls-list">
    <li class="gls-margin-top">
        <!--
            Using some padding utilities here for demo purposes,
            but they are not required to use with border utilities
        -->
        <div class="gls-border-top">
            <span>Border top</span>
        </div>
    </li>
    <li class="gls-margin-top">
        <div class="gls-border-right">
            <span>Border right</span>
        </div>
    </li>
    <li class="gls-margin-top">
        <div class="gls-border-bottom">
            <span>Border bottom</span>
        </div>
    </li>
    <li class="gls-margin-top">
        <div class="gls-border-left">
            <span>Border left</span>
        </div>
    </li>
    <li class="gls-margin-top">
        <div class="gls-border">
            <span>Border all</span>
        </div>
    </li>
    <li class="gls-margin-top">
        <div class="gls-border gls-border-radius">
            <span>Border radius</span>
        </div>
    </li>
</ul>