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 ReferenceDetails
.borderAdd 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 ReferenceDetails
.border-0Remove border from all sides of an element
.border-{top|bottom|left|right}-0Remove 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 ReferenceValue
.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 ReferenceDetails
.roundedApply rounded corner of an element
.rounded-{top|bottom|left|right}Apply rounded on specific corner of an element
.rounded-circleApply full circle box of an element
.rounded-pillApply pill rounded corner of an element
.rounded-0Remove 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">
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Bordered
Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Blue Light
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?