Struggling with changing the border color for Tab 2, while Tab 1 works fine.
All my custom CSS comes after Bootstrap 5 CSS, so why isn't it overriding the changes?
CSS
.nav-tabs {
border-color: black;
}
.nav-tabs > li > a {
border-color: red;
}
.nav-tabs > li > a:hover {
border-color: blue;
}
.nav-tabs > li.active > a {
border-color: green;
}
HTML
<ul class="nav nav-tabs mb-5">
<li class="nav-item active">
<a class="nav-link" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>