Borders - Grid System

Table of contents

Overview

Surprisingly borders are not an easy design feature to achieve in a grid system. Since each grid cells is a predetermined fixed width, the addition of a border increases the cell's width, which then breaks the grid layout.

For example a span-2 is 220px wide when viewed at the 1024x768 resolution. If a 1px CSS border is added to all 4 sides, the grid cell will become 222px wide, as 1px is added for both the left and right side. This means that the cell will not properly fit into place, as it is 2px too wide.

Therefore, in order to offer borders as a design feature, the CSS border attribute could not be used. Instead a CSS background image and CSS outline are used.

For the individual borders (-top, -right, -bottom and -left), an image of a 1px gray square is used and that image repeats either across for -top and -bottom, or down for -right and -left. Based on the CSS box model, the background image does not increase the total width of the grid cell, however the limitation is that a div can only display one background image at a time. Therefore if you want a border-top and a border-right, you have to layer the two like this: <div class="border-top"><div class="border-right">....</div></div>.

For a full surround border, the CSS outline attribute is used. Outline does not impact the width but it will draw the border outside 1px outside the box, whereas the background image is inside the box. Here is an example:

Spot the 2px outline different - left 1px / right 1px

border-top + border-right + border-bottom + border-left

text

View code 
<div class="border-top">
<div class="border-right">
<div class="border-bottom">
<div class="border-left">
<div class="span-2 background-light margin-top-medium margin-bottom-medium">
<p>text</p>
</div>
</div>
</div>
</div>
</div>
border-all

text

View code 
<div class="border-all">
<div class="span-2 background-light margin-top-medium margin-bottom-medium">
<p>text</p>
</div>
</div>
border-top + border-right + border-bottom + border-left

text

View code 
<div class="span-2 background-light border-top">
<div class="span-2 margin-bottom-none border-right">
<div class="span-2 margin-bottom-none border-bottom">
<div class="span-2 margin-bottom-none border-left">
<p>text</p>
</div>
</div>
</div>
</div>
border-all

text

View code 
<div class="span-2 background-light margin-top-medium margin-bottom-medium border-all">
              <p>text</p>
              </div>

Which is best? border-all or border-top + border-right + border-bottom + border-left

There is no right or wrong and they both have benefits.

border-all

From a coding stance, this is more effecient, however it visually breaks the grid cells by 2px, even those is doesn't break the grid layout.

border-top + border-right + border-bottom + border-left

From a coding stance, this is not efficient as each class must be attached its own div, however the border remains inside the grid cell.

CSS

border-top

Border on top and wraping grid cell.


View code 
<div class="border-top">
<div class="span-2 background-light margin-top-medium margin-bottom-medium">
<br>
<p>Border on <strong>top</strong> and <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
border-top

Border on top and on grid cell.


View code 
<div class="span-2 background-light border-top"> <br>
<p>Border on <strong>top</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>
border-right

Border on right and wraping grid cell.


View code 
<div class="border-right">
<div class="span-2 background-light margin-bottom-none">
<br>
<p>Border on <strong>right</strong> and <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
border-right

Border on right and on grid cell.


View code 
<div class="span-2 background-light  border-right"> <br>
<p>Border on <strong>right</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>
border-bottom

Border on bottom and wraping grid cell.


View code 
<div class="border-bottom">
<div class="span-2 background-light margin-bottom-medium">
<br>
<p>Border on <strong>bottom</strong> and <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
border-bottom

Border on bottom and on grid cell.


View code 
<div class="span-2 background-light  border-bottom"> <br>
<p>Border on <strong>bottom</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>
border-left

Border on left and wraping grid cell.


View code 
<div class="border-left">
<div class="span-2 background-light margin-bottom-none">
<br>
<p>Border on <strong>left</strong> and  <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
border-left

Border on left and on grid cell.


View code 
<div class="span-2 background-light  border-left"> <br>
<p>Border on <strong>left</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>
border-all

Border on all and wraping grid cell.


View code 
<div class="border-all">
<div class="span-2 background-light margin-bottom-medium margin-top-medium">
<br>
<p>Border on <strong>all</strong> and  <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
border-all

Border on all and on grid cell.


View code 
<div class="span-2 background-light  border-all"> <br>
<p>Border on <strong>right</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>