Menu icon Foundation
Best way to apply a border to full content?

Curious about how to appy a border (top,rightm bottom and left) to the whole content of an email. Kinda like this example from nike. Thanks!

email border

Curious about how to appy a border (top,rightm bottom and left) to the whole content of an email. Kinda like this example from nike. Thanks!

Corey Schaaf over 2 years ago

 

This should help you achieve the effect you're looking for. Keep in mind, if you nest a wrapper, within a wrapper (which I don't recommend doing) you wall have a border on your inner most elements as well. So you would need to create a different class on the inner most wrapper and target the new class and set the border (or any other styles that are cascading downwards) to 0px. 

<style>
  // notice that .wrapper-inner is a class that you have access
  // to so you can incorporate styles on elements inside the .wrapper class
  // inky adds the markup during Foundation Watch cmds or Foundation Build cmds
 
  .nike-border .wrapper-inner{
    border:1px solid #212131;
    padding:0px;
  }
</style>

<row>
  <columns>
    <center>
        <a href="http://nike.com">VOIR EN FRANÇAIS</a>
    </center>
  </columns>
</row>
<wrapper class="nike-border">
  <row>
    <columns>
      Add all content you want to have a border here. 
    </columns>
  </row>
</wrapper>