Separators Between Row/Col

I am using rows and columns to layout a page in to sections - which works fine. What I am struggling with is "drawing" separators between my sections. At first I assumed I could just add a border - which I can - but I don't want them to be tightly up against each other. If I play with the margins or padding it seems to cause the columns to wrap around.

I followed a video linked int he forums to add vertical left borders between columns which works well, the separator was 100% in height so I increased the margin between my rows to get separation which again seems to work well. Following this I've been trying to do the same but with horizontal separators. While a similar approach works the left and bottom borders then meet whereas I wanted them to more float.

.my-bottom-border {
  border-bottom: 2px solid red;

Any suggestions on how to get workable borders within each column to make sections or even better separators between them but not the entire height/width?

I think I got a little closer, I created an additional row with the same columns and an <hr> in each column, this seems to get me close to the desired effect but still feels like there should be a more straightforward way - or am I just nuts?!

Not sure on the vertical, haven't bothered to do that for many years as I use a lot of background color to separate areas now instead of borders. Horizontally though you are doing it right, you don't even have to add a row, you can put the HR into a current column if that columns's settings work with the HR.

Be creative, you can add all kinds of effects to things now from shadows to gradients or even images for that matter, doesn't have to only be an HR is what I mean.

Another possibility would be an HR that is visually transformed to a different angle, not sure how that would work for making it stretch or shrink in size, never tried it, but seems to me in theory it should work.