Borders between columns of Bootstrap Grid not working

Question

I\'m creating a page in bootstrap where I\'m using 4 cols inside a row. The code:

Answer 1

To expand on the outline solution, if you want a border that collapses to the same size if two adjacent columns both have borders, use box-shadow:

box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc;

The downside to box-shadow versus outline is that box-shadow may be rendered by any browser at a subpixel position, whereas outlines and borders snap to the nearest pixel. If a box-shadow ends up on a subpixel position, it will appear soft or blurred. The only way to avoid this is to ensure you don't do things that will cause the column to be aligned on a subpixel position.