how to give a border to bootstrap tab contents

Question

I\'m using bootstrap tabs and it works perfectly. I\'m trying to figure out if there is a way to use bootstrap to give a border to the contents of the tabs that is connected to

Answer 1

With following code, all corner have radius, but tabs offset.

.nav-tabs {
    padding-left: 15px;
    margin-bottom: 0;
    border: none;
}
.tab-content {
    border: 1px solid #ffffd;
    border-radius: 4px;
    padding: 15px;
}

Caution: If you set nav-tab's padding-left 0px, first tab conflicts with left-top radius of contents.

Answer 2

I would modify Kisuka's answer to the following:

CSS

.tab-pane {

    border-left: 1px solid #ffffd;
    border-right: 1px solid #ffffd;
    border-bottom: 1px solid #ffffd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

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

SCSS for Bootstrap 4

.tab-pane {
    border-left: 1px solid $nav-tabs-border-color;
    border-right: 1px solid $nav-tabs-border-color;
    border-bottom: 1px solid $nav-tabs-border-color;
    border-radius: 0px 0px $nav-tabs-border-radius $nav-tabs-border-radius;
    padding: $spacer;
}

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

Answer 3

You can use the following code to achieve it :
JSfiddle Demo

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
border-bottom: 1px solid #ffffdffffd;
outline:0;
 }
}