Search code examples
htmlcssmenuborder

How to make menu with bordered active item only from 3 sides?

My menu has 2 borders: the main vertical border on the right of the whole menu and the border (top, bottom, left) of the active item. The right border of the active item should be empty. The main border should be interrupted in the same place where the active item right border was interrupted. Note that any of the items could be active, that is why the main border interruption can't be hardcoded

.container {
  border-right: 1px solid;
  width: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.item {
  padding: 10px;
}

.active {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
}
<div class="container">
  <div class="item active">
    Test1
  </div>
  <div class="item">
    Test2
  </div>
  <div class="item">
    Test3
  </div>
</div>

enter image description here

Solution

  • You can add a box-shadow for the right part to hide the border.

    .container {
  border-right: 1px solid;
  width: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.item {
  padding: 10px;
}

.active {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
  box-shadow: 1px 0px 0px 0px white;
}
    <div class="container">
  <div class="item active">
    Test1
  </div>
  <div class="item">
    Test2
  </div>
  <div class="item">
    Test3
  </div>
</div>