I’m working on some comps that have two sets of borders. I’m solving for this by hacking box-shadows to produce multiple borders.

Test fiddle

The trick is to use the spread parameter of the box-shadow property to create bigger shapes than the original element.

The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius.

Note that like multiple backgrounds, box-shadows are rendered in reverse order. So the last shadow declared in the code will appear behind its predecessors. The first shadow appears at the top.

Interesting in how Firefox and Opera renders border-radius the faux-borders around the original element producing circles, whereas WebKit applies the original border-radius to the faux-borders, producing rounded rectangles.

• WebKit : webkitTransitionEnd
• Firefox : transitionend
• Opera : oTransitionEnd

Tested in this fiddle

(Source: stackoverflow.com)

Yar, 3D transform be ahead. Safari only. The examples below also live together in a lovely house in this fiddle.

Safari has support for a perspective transform function. This is pretty convenient for doing a simple 3d transform, like a card flip.

#wkptfn-example1 .alpha {
  background: blue;
  -webkit-transform: perspective(800) rotateY( 0deg);
}

#wkptfn-example1:hover .alpha {
  -webkit-transform: perspective(800) rotateY(-180deg);      
}

#wkptfn-example1 .beta {
  background: red;
  -webkit-transform: perspective(800) rotateY(180deg);
}

#wkptfn-example1:hover .beta {
  -webkit-transform: perspective(800) rotateY( 0deg);
}

Hover for Card Flippin’ Action

The problem with it is that the perspective is only for the one element. If you use the same transform across elements with different position, each element will have its own vanishing point.

#wkptfn-example2 div {
  -webkit-transform: perspective(800) rotateY(45deg);
}

To remedy this, you need to specify a perspective or the parent with -webkit-perspective: and then let the children inherit it with -webkit-transform-style: preserve-3d;

#wkptfn-example3 {
  -webkit-perspective: 800;
}

#wkptfn-example3 div {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(45deg);
}