Components

## Border Utility

Use border utilities to quickly style the border and border-radius of an element.

#### Additive Border

You can add border to any side of an element with border utilities classes.

Class Reference | Details
--- | ---
`.border` | Add border in all sides of an element
`.border-{top|bottom|left|right}` | Add border in relavent side

Uses Example

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

#### Subtractive Border

You can remove border to a single side of an element with below border utilities classes.

Class Reference | Details
--- | ---
`.border-0` | Remove border from all sides of an element
`.border-{top|bottom|left|right}-0` | Remove border from specific side of an element

Uses Example

    <div class="border-0"></div>
    <div class="border-top-0"></div>

#### Border Color

Change the border color using utilities built on our theme colors.

Class Reference | Value
--- | ---
`.border-{value}` | primary | secondary | success | warning | danger | info | dark | gray | light | white

Uses Example

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

#### Border Radius

Use these utility classes to set radius to the element.

Class Reference | Details
--- | ---
`.rounded` | Apply rounded corner of an element
`.rounded-{top|bottom|left|right}` | Apply rounded on specific corner of an element
`.rounded-circle` | Apply full circle box of an element
`.rounded-pill` | Apply pill rounded corner of an element
`.rounded-0` | Remove rounded egde from an element
`.rounded-{sm|lg}` | Apply small and large rounded corner of an element

Uses Example

    <img src="..." alt="..." class="rounded">
    <img src="..." alt="..." class="rounded-top">