Customizing bootstrap tabs

Question

I am currently working on a project where I need to implement tabs with custom styles. I am stuck in achieving two things in customization regarding borders of tabs. I need to round the border-bottom that is in red color, and add distance between right border and bottom border, and right border height should be equal to the height of text in tabs link. Attaching the reference image and code of what I have accomplished so you can get better idea. Any help or suggestion would be highly appreciated. Note: Bootstrap version used is 5.0

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
 />
 <style>
 .categories {
  padding-top: 25px;
  background-color: #f5f6fa;

}
.categories .category__item {
  border-right: 1px solid #dcdcdc;
}
.categories .category__link {
  color: #0b1320;
  font-size: 24px;
  opacity: 0.6;
  padding: 0 34px 14px 34px;
  transition: none;
}
.categories .category__link.active {
  background: transparent;
  border: none;
  color: #000;
  opacity: 1;
  font-weight: bold;
  border-bottom: 5px solid red;
}
 </style>
  <ul
      class="nav justify-content-center nav-tabs categories"
      id="myTab"
      role="tablist"
    >
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link active"
          id="home-tab"
          data-bs-toggle="tab"
          data-bs-target="#home"
          type="button"
          role="tab"
          aria-controls="home"
          aria-selected="true"
        >
          link1
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link2
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="contact-tab"
          data-bs-toggle="tab"
          data-bs-target="#contact"
          type="button"
          role="tab"
          aria-controls="contact"
          aria-selected="false"
        >
          link3
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link4
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link5
        </button>
      </li>
    </ul>
<script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
 ></script>

Answer 1

You cannot round the ends of a border, but you can apply a border-radius that rounds the shape of an element with height and width.

This solution applies a border-radius to an :after pseudo-element that is positioned along the bottom edge of its parent. Notice that the parent .categories .category__link now has the style position: relative;.

.categories {
    padding-top: 25px;
    background-color: #f5f6fa;

}
.categories .category__item {
    border-right: 1px solid #dcdcdc;
}
.categories .category__link {
    color: #0b1320;
    font-size: 24px;
    opacity: 0.6;
    padding: 0 34px 14px 34px;
    transition: none;
    position: relative;
}
.categories .category__link.active {
    background: transparent;
    border: none;
    color: #000;
    opacity: 1;
    font-weight: bold;
}
.categories .category__link.active:after {
    background-color: red;
    border-radius: 5px;
    content: '';
    bottom: -1px;
    display: block;
    height: 5px;
    left: 12.5%;
    position: absolute;
    width: 75%;
}
.nav-tabs .nav-link.active {
    background-color: transparent;
}

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
<ul
  class="nav justify-content-center nav-tabs categories"
  id="myTab"
  role="tablist"
>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
      role="tab"
      aria-controls="home"
      aria-selected="true"
    >
      link1
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link2
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="contact-tab"
      data-bs-toggle="tab"
      data-bs-target="#contact"
      type="button"
      role="tab"
      aria-controls="contact"
      aria-selected="false"
    >
      link3
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link4
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link5
    </button>
  </li>
</ul>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
  crossorigin="anonymous"
></script>