Bootstrap tabs with custom corners

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

enter image description here

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>

Does this answer your question? [Reverse border radius with css3](https://stackoverflow.com/questions/39688253/reverse-border-radius-with-css3) — GameO7er, Oct 19 '20 at 08:03

score 0 · Accepted Answer · answered Oct 20 '20 at 23:17

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>

Wow! This is awesome, but not exactly what I want :( I updated the description of the problem, the second image shows what I need. I have seen custom solutions to this problem, but they cannot be correctly wrapped in a frame like Bootstrap does by default. — Danny Ocean, Oct 21 '20 at 17:58

Bootstrap tabs with custom corners

1 Answers1