How to add a border to Zurb Foundation grid columns?

Question

I just tried adding a border to my foundation grid columns, and found the code has no effect. Have tried searching for an answer, and implementing alternative techniques, and for some reason nothing's working. Below is the code I'm using (using inline styling for example purposes, not present in actual code!).

<div class="large-4 columns" style="border-color: #466d98; border-width:10px;">
<h2 class="subheader"> Lorem Ipsum </h1>
<img src="img/cloud.png">
<p> consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est, nec vestibulum dolor. Suspendisse potenti. Vivamus egestas vestibulum ante egestas adipiscing. In hac habitasse platea dictumst. Etiam eros orci, bibendum ut ultricies quis, mollis ut dolor.</p>
</div>

I've tried this method too (not bordering the columns themselves, but adding a bordered div inside them):

<div class="large-4 columns">
<div style="border-color: #466d98; border-width:10px;">
<h2 class="subheader"> Lorem Ipsum </h1>
<img src="img/cloud.png">
<p> consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est, nec vestibulum dolor. Suspendisse potenti. Vivamus egestas vestibulum ante egestas adipiscing. In hac habitasse platea dictumst. Etiam eros orci, bibendum ut ultricies quis, mollis ut dolor.</p>
</div>
</div>

Neither approach works. I'm thoroughly surprised that I can't find a solution anywhere on the internet, as there must be plenty of people who want bordered columns. Hopefully this isn't a case of me overlooking something painfully simple. Can anyone shed any light on this? Thanks.

Answer 1

You can try:

<div class="large-4 columns" style="border: 10px solid #466d98;">

or in your stylesheet:

 .columns {
  border: 10px solid #466d98;
  }

Answer 2

1. You're missing the border-style property.
2. you open a <h2> tag, but close it with </h1>
3. close your <img> tag
4. a shorter way to write the border will be border: 10px solid #466d98;.

A fixed markup will look like that. and here's one with the short version of border.

You may have other CSS/Markup issues that causing it not to work in your code (for example ,if the elements have display: table-row; the border will not get applied).