how to give a border to bootstrap tab contents

The following css should do exactly what you’re looking for 🙂

.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 10px;
}

.nav-tabs {
    margin-bottom: 0;
}

margin-bottom: 0; on .nav-tabs removes the gap in between the pills and content.

The padding on .tab-content makes the content not pressed against the new borders on the left and right.