- Skip to main content
- Skip to footer

# Borders - Grid System

## Table of contents

- Overview
- CSS

## 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>

Date modified:
  2013-04-11