「CSSでボーダーにグラデーションをかける方法3つ」のデモ

  <div class="demo-area">
  	<div class="grad-demo1">
  		<div class="grad-demo1_inner">方法1のデモ</div>
  	</div>
  </div>
  

  .grad-demo1{
    padding: 1px;
    background: linear-gradient(to right, #00f, #f00);
  }

  .grad-demo1_inner{
    padding: 16px;
    background-color: #fff;
  }
  

<div class="demo-area">
	<div class="grad-demo2">方法2のデモ</div>
</div>

.grad-demo2::before,
.grad-demo2::after{
  content: '';
  display: block;
  width: calc( 100% + 32px );
  height: 1px;
  margin-left: -16px;
  background: linear-gradient(to right, #00f, #f00);
}

.grad-demo2::before{
  margin-bottom: 16px;
}

.grad-demo2::after{
  margin-top: 16px;
}

<div class="demo-area">
	<div class="grad-demo3">方法2のデモ</div>
</div>

.grad-demo3{
  padding: 16px;
  border: solid 1px transparent;
  border-image: url("img/bg.jpg") 1 stretch;
}