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 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>