Is there a way to achieve a consistent 1px border around columns using only CSS, without creating a 2px border when two columns are side by side? I want the outer edges to have a 1px border while the inner borders have a double width due to being adjacent. Essentially, I want the table cell borders but with the responsiveness of a grid system.
#example {
padding: 20px;
}
#example .col {
border: 1px solid #c9c9c9;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div id="example">
<div class="row">
<div class="col">
1st col
</div>
<div class="col">
2nd col
</div>
<div class="col">
3rd col
</div>
</div>
<div class="row">
<div class="col">
4th col
</div>
<div class="col">
5th col
</div>
</div>
</div>