How to change border color of nav-tab? - html

Question

I'm having trouble changing the border color for Tab 2 (see below). For Tab 1, the color changes from the default light gray color.
My custom CSS is placed after the bootstrap 5 CSS so it should be overwriting my changes without issue. What am I doing wrong here?
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>

Answer 1

There are a few problems...
The active class doesn't automatically change using just HTML markup. Use the Tabs javascript component. For example data-bs-toggle="tab"...
<ul class="nav nav-tabs mb-5">
<li class="nav-item">
<a class="nav-link active" href="#t1" data-bs-toggle="tab">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#t2" data-bs-toggle="tab">Tab 2</a>
</li>
</ul>
Secondly, the active class goes on the nav-link not the nav-item. So the CSS selector would be...
.nav-tabs > li > .nav-link.active {
border-color: green;
}
https://codeply.com/p/EtmicwumKC