Border not transparent with linear gradient

Question

Why when I apply transparent border to div with linear-gradient, border is not transparent on top and bottom.

div {
  width: 300px;
  height: 300px;
  background: linear-gradient(pink, red);
  border: 20px solid transparent;

}

screenshot http://i43.tinypic.com/2r3gjmx.png

Answer 1

For anybody who's looking for a solution:

TLDR

background-origin: border-box;

Explanation https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin