Chris Coyier

Using pseudo element(s)

You can position a pseudo element such that it’s either behind the element, and larger, making a border effect with it’s own background, or smaller and inside (but make sure the content gets positioned on top).

The element needing multiple borders should have its own border and relative positioning.

.borders {
  position: relative;
  border: 5px solid #f00;
}

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right … Read article “Multiple Borders”

Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this:

#box {
  background: 
    url(icon.png) top left no-repeat, 
    url(texture.jpg), 
    url(top-edge.png) top left repeat-y;
}

They are comma separated values and there can be as many as you want with different URL’s, positioning, and repeat values. You can even combine WebKit gradients into the mix:

#box {
	background: 
		url(../images/arrow.png) 15px center no-repeat,
		-webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
}

Old school IE on the Mac … Read article “Multiple Backgrounds Syntax”

As in, the game PICROSS3D.

CSS3 Technique

Button Button Button

.btn {
  color: white;
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 20px;
  text-decoration: none;
  text-shadow: -1px -1px 1px #616161;
  position: relative;
  padding: 15px 30px;
  -webkit-box-shadow: 5px 5px 0 #666;
  -moz-box-shadow: 5px 5px 0 #666;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  margin: 0 10px 0 0;
}

.btn:hover {
  -webkit-box-shadow: 0px 0px 0 #666;
  -moz-box-shadow: 0px 0px 0 #666;
  top: 5px;
  left: 5px;
}

jQuery Technique

Smoother, but … Read article “Picross Style Buttons”

a[href^="http://"] {
        /* fully valid URL, likely external link */
}

a[href="http://google.com"] {
        /* link to specific website */
}

a[href^="/"], a[href^=".."] {
        /* internal relative link */
}

a[href^="mailto:"] {
        /* email link */
}

a[href$=".pdf"] {
        /* PDF file */
}

a[href$=".doc"] {
        /* Microsoft Word document */
}

a[href$=".mp3"] {
        /* Music file */
}

a[href$=".zip"] {
        /* Archive file */
}