JSFiddle - React, Tailwind, and code Playground

by IvanBender

HTML

<div class="wrapper">
  <ul class="list">
    <li class="list__item"><a href="#" class="list__link">1</a></li>
    <li class="list__item  list__item--active"><a href="#" class="list__link">2</a></li>
    <li class="list__item"><a href="#" class="list__link">3</a></li>
    <li class="list__item"><a href="#" class="list__link">4</a></li>
    <li class="list__item"><a href="#" class="list__link">5</a></li>
  </ul>
</div>

CSS

.wrapper {
  display: flex;
  justify-content: center;
  padding: 50px 0;
}

.list {
  display: flex;
  padding: 0;
  margin: 0;
  border: 1px solid lightgray;
  border-radius: 5px;
  list-style: none;
}
.list__item:not(:last-child) {
  border-right: 1px solid lightgray;
}
.list__item--active .list__link::before,
.list__link:hover::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 1px);
  border: 1px solid blue;
  content: "";
}
.list__item:first-child .list__link::before {
  border-radius: 5px 0 0 5px;
}
.list__item:last-child .list__link::before {
  border-radius: 0 5px 5px 0;
}
.list__link {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
}