Borders - Documentation | Front - Multipurpose Responsive Template

Additive

Preview
HTML

              
                <span class="border"></span>
                <span class="border-top"></span>
                <span class="border-end"></span>
                <span class="border-bottom"></span>
                <span class="border-start"></span>

Subtractive

Preview
HTML

              
                <span class="border-0"></span>
                <span class="border border-top-0"></span>
                <span class="border border-end-0"></span>
                <span class="border border-bottom-0"></span>
                <span class="border border-start-0"></span>

Border color

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

Preview
HTML

              
                <span class="border border-primary"></span>
                <span class="border border-secondary"></span>
                <span class="border border-success"></span>
                <span class="border border-danger"></span>
                <span class="border border-warning"></span>
                <span class="border border-info"></span>
                <span class="border border-light"></span>
                <span class="border border-dark"></span>
                <span class="border border-white"></span>
                <span class="border border-white-10"></span>

Border width

Preview
HTML

              
                <span class="border border-1"></span>
                <span class="border border-2"></span>
                <span class="border border-3"></span>
                <span class="border border-4"></span>
                <span class="border border-5"></span>

Border radius

Add classes to an element to easily round its corners.

Preview
HTML

              
                <img class="img-fluid rounded" src="../assets/img/160x160/img1.jpg" alt="Example non-rounded image" />
                <img class="img-fluid rounded-top" src="../assets/img/160x160/img1.jpg" alt="Example top rounded image" />
                <img class="img-fluid rounded-right" src="../assets/img/160x160/img1.jpg" alt="Example right rounded image" />
                <img class="img-fluid rounded-bottom" src="../assets/img/160x160/img1.jpg" alt="Example bottom rounded image" />
                <img class="img-fluid rounded-left" src="../assets/img/160x160/img1.jpg" alt="Example left rounded image" />
                <img class="img-fluid rounded-circle" src="../assets/img/160x160/img1.jpg" alt="Completely round image" />
                <img class="img-fluid rounded-pill" src="../assets/img/documentation/img7.jpg" alt="Example pilled image" />

Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 3, and can be configured by modifying the utilities API.

Preview
HTML

              
                <img class="img-fluid rounded-0" src="../assets/img/160x160/img1.jpg" alt="Example non-rounded image" />
                <img class="img-fluid rounded-1" src="../assets/img/160x160/img1.jpg" alt="Example small rounded image" />
                <img class="img-fluid rounded-2" src="../assets/img/160x160/img1.jpg" alt="Example default rounded image" />
                <img class="img-fluid rounded-3" src="../assets/img/160x160/img1.jpg" alt="Example large rounded image" />