Bootstrap tabs with custom corners - html

Question

I have tabs based on the Bootstrap 4 template, but recently I ran into this problem: I need to make smooth corners at the bottom, more details in the screenshot from the layout below.
What is available:
What should be done (I circled in red):
My code:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="home1 nav-link active" data-toggle="tab" href="#description">Tab1</a>
</li>
<li class="nav-item">
<a class="home2 nav-link" data-toggle="tab" href="#characteristics">Tab2</a>
</li>
<li class="nav-item">
<a class="home3 nav-link" data-toggle="tab" href="#opinion">Tab3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="description"></div>
<div class="tab-pane fade" id="characteristics"></div>
<div class="tab-pane fade" id="opinion"></div>
</div>

Answer 1

Maybe it will help.
.nav-tabs .nav-link {
position: relative;
}
.nav-tabs .nav-link:focus::after,
.nav-tabs .nav-link:focus::before,
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link:hover::before,
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link.active::before {
content: "";
border: 1px solid;
width: 8px;
height: 8px;
position: absolute;
top: -1px;
z-index: 9;
background-color: #fff;
}
.nav-tabs .nav-link:focus::after,
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link.active::after {
border-color: #fff #dee2e6 #dee2e6 #fff;
border-radius: 0.25rem 0;
left: -1px;
}
.nav-tabs .nav-link:focus::before,
.nav-tabs .nav-link:hover::before,
.nav-tabs .nav-link.active::before {
border-color: #fff #fff #dee2e6 #dee2e6;
border-radius: 0 0.25rem;
right: -1px;
}
<!-- Libraries -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="home1 nav-link active" data-toggle="tab" href="#description">Tab1</a>
</li>
<li class="nav-item">
<a class="home2 nav-link" data-toggle="tab" href="#characteristics">Tab2</a>
</li>
<li class="nav-item">
<a class="home3 nav-link" data-toggle="tab" href="#opinion">Tab3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="description"></div>
<div class="tab-pane fade" id="characteristics"></div>
<div class="tab-pane fade" id="opinion"></div>
</div>