How to add a block border without moving the content from its original position?

Question

css

Hello! There are 3 blocks in the bootstrap grid , where the block in the middle is framed by a border, but in this form the text in the block is shifted relative to its original position, which can be observed relative to its neighbors. How to properly preserve the border and at the same time leave the text in place. I tried to make border through pseudo -classes :before :after , but I only have 2 sides closed instead of 4. Fiddle

<div class="container">
  <div class="row text-center">
    <div class="col">
      <p>1 of 3</p>
      <p>1 of 3</p>
      <p>1 of 3</p>
    </div>
    <div class="col" id="col-border">
      <p>2 of 3</p>
      <p>2 of 3</p>
      <p>2 of 3</p>
    </div>
    <div class="col">
      <p>3 of 3</p>
      <p>3 of 3</p>
      <p>3 of 3</p>
    </div>
  </div>
</div>

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

#col-border {
  border: 5px solid blue;
}

Answer 1

If you don't bother too much, then:

#col-border {
  border: 5px solid blue;
  padding:5px;
}