Как добавить границу блока, а контент при этом не смещать с первоначального положения?

Question

[ligisayan]

Всем привет! Есть 3 блока в сетке bootstrap, где в блок посередине обрамлен границей, но в таком виде текст в блоке смещается относительно первоначального положения, что можно наблюдать относительно соседей. Как правильно сохранить границу и в тоже время текст оставить при этом на месте. Пробовал делать border через псевдоклассы :before :after, но у меня только 2 стороны закрываются вместо 4ех. Фидл

<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

[Pavel Karinin]

Если особо не заморачиваться, то так:

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