Как установить прозрачную правую границу для вертикальных вкладок в Bootstrap 4

Question

Я пытаюсь создать вертикальные вкладки в Bootstrap 4. В основном я уже закончил с этим, но хотел бы сделать правую границу активной вкладки прозрачной. Я пытался сделать это, но, похоже, это не работает. Вы можете найти рабочую скрипку того, что я сделал до сих пор, здесь: https://jsfiddle.net/mgryf1v5/4/

HTML:

<div class="container">
   <div id="tabs-6ea2d5d5-9e96-4da1-89be-d8faff5a653d" role="tabpanel">
    <ul class="nav nav-tabs nav-tabs-left" role="tablist">
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-1" aria-controls="tab-1" role="tab" data-toggle="tab" aria-selected="false">Tab 1</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-2" aria-controls="tab-2" role="tab" data-toggle="tab">Tab 2</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-3" aria-controls="tab-3" role="tab" data-toggle="tab">Tab 3</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-4" aria-controls="tab-4" role="tab" data-toggle="tab">Tab 4</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-5" aria-controls="tab-5" role="tab" data-toggle="tab">Tab 5</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab-1" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 1
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-2" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 2
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-3" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 3
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-4" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 4
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-5" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 5
                </div>
            </div>
        </div>
    </div>
</div>
</div>

CSS:

.nav-tabs-left {
    float: left;
    display: block;
    margin-right: 20px;
    border-bottom:0;
    border-right: 1px solid #ddd;
}
.nav-tabs-left .nav-link.active, .nav-tabs-left .nav-item.show .nav-link {
    border-color: #dee2e6 transparent #dee2e6 #dee2e6;
}

РЕДАКТИРОВАТЬ

Окончательный CSS на основе комментариев @Rishi Raj:

.nav-tabs-left {
    float: left;
    display: block;
    margin-right: 20px;
    border-bottom:0;
    border-right: unset !important;
}
.nav-tabs-left .nav-link {
  border-right: 1px solid #ddd !important; 
}
.nav-tabs-left .nav-link.active, .nav-tabs-left .nav-item.show .nav-link {
    border-color: #dee2e6 #fff #dee2e6 #dee2e6 !important;
}

и скрипку можно найти здесь: https://jsfiddle.net/1rq4wv3z/

Answer 1

.nav-link.active { 
  border-color: #dee2e6 #fff #dee2e6 #dee2e6 !important;
}
.nav-tabs-left { 
  border-right: unset !important; 
} 
.nav-link { 
  border-right: 1px solid #ddd !important;
}

Answer 2

.nav-tabs-left {
    float: left;
    display: block;
    margin-right: 20px;
    border-bottom:0;
    border-right-color: transparent ;
}
.nav-link {
    border-right: 1px solid #ddd !important;
} 
.nav-link.active {
border-color: #dee2e6 #fff #dee2e6 #dee2e6 !important;
}