У меня проблема с CSS3. Я не знаю, как сделать диагональную градиентную границу вот так:

Я нашел что-то вродеэтот:

.box {
  width: 250px;
  height: 250px;
  margin: auto;
  background: #eee;
  border: 20px solid transparent;
  -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
}

<div class="box"></div>

Но, к сожалению, это работает только с квадратами.

Любая помощь будет оценена.