Bootstrap 4 Borders

Bootstrap 4 border utilities add or remove borders, choose contextual border colors and apply rounded corners.

Add or Remove Borders Top ↑

<div class="border">All borders</div>
<div class="border-top">Top border</div>
<div class="border-right">Right border</div>
<div class="border-bottom">Bottom border</div>
<div class="border-left">Left border</div>

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

Border Colors Top ↑

<div class="border border-primary">Primary</div>
<div class="border border-success">Success</div>
<div class="border border-danger">Danger</div>

Border Radius Top ↑

<div class="border rounded">Rounded</div>
<div class="border rounded-circle">Circle</div>
<div class="border rounded-pill">Pill</div>

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<style>
.my_box{ 
position: relative;
margin:8px;
width:80px;
height: 80px;
padding:10px;
background-color: #f1f1f1;
}</style>

Original example 2

<div class='my_box border'>All</div> 
<div class='my_box border-top'>Top</div>
<div class='my_box border-right'>Right</div>
<div class='my_box border-bottom'>Bottom</div>
<div class='my_box border-bottom'>Left</div>

Original example 3

<div class='my_box border border-0'>All</div> 
<div class='my_box border border-top-0'>Top</div>
<div class='my_box border border-right-0'>Right</div>
<div class='my_box border border-bottom-0'>Bottom</div>
<div class='my_box border border-bottom-0'>Left</div>

Original example 4

<div class='my_box border border-primary'>primary</div> 
<div class='my_box border border-secondary'>secondary</div>
<div class='my_box border border-success'>success</div>
<div class='my_box border border-danger'>danger</div>
<div class='my_box border border-warning'>warning</div>
<div class='my_box border border-info'>info</div>
<div class='my_box border border-dark'>dark</div>
<div class='my_box border border-light'>light</div>
<div class='my_box border border-white'>white</div>

Original example 5

<div class='my_box rounded'>All</div> 
<div class='my_box rounded-top'>top</div> 
<div class='my_box rounded-right'>right</div>
<div class='my_box rounded-bottom'>bottom</div>
<div class='my_box rounded-left'>left</div> 
<div class='my_box rounded-circle'>circle</div> 
<div class='my_box rounded-0'>0</div>

Additional Original Learning Routes Top ↑

• bs-alert.php
• bs4-grid.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: