How to place a div on another div's border and have it transparent

1

Just like in this image slider button , here the button is placed on the border of the div and its background transparent, it doesn’t cover anything how can i create something like this without using a background color on the slider button.

The html is

 <div class="slider slide-2 inner-container">
   container 2
 </div>
  <!-----slider Navigator----->
<div class="navigator left">
 <i class="fa fa-chevron-left" aria-hidden="true">nav left</i>
</div>
<div class="navigator right">
  <i class="fa fa-chevron-right" aria-hidden="true">nav right</i>
</div>
</div>```

The css is

      ```.col-md-12 {
      display: flex;
      flex-wrap: wrap;
      justify-contents: center;
      margin: 0 auto;
    }

    .navigator {
      display: flex;
      padding: 15px;
      border: 1px solid #E91E63;
      width: 65px;
      height: 65px;
      z-index: 999;
      position: absolute;
      top: 40%;
    }

    .navigator i {
      font-size: 35px;
      margin: 0 auto;
    }

    .navigator.left {
      left: 35px;
    }

    .navigator.right {
      right: 35px;
    }

    .col-md-12 div.slide-2 {
      left: 10%;
    } 

    .col-md-12 .navigator {
      flex-basis: 50%;
      margin-top: 10px;
      order: 3;
    }

    .col-md-12 .slider {
      width: 80%;
      flex-basis: 100%;
      margin-top: 10px;
      order: 4;
      height: 250px;
      position: absolute;
      top: 70px;
      border: 2px solid black;
      background: white;
    }```