画像を使わずにグラデーションにする方法を紹介します。今回は2パターン紹介します。簡単なやり方とちょっと手間なやり方です。記者自身は簡単な方を良く使っています。

サンプル

簡単にボーダーをグラデーションをする方法

.borderBG{ display: inline-block; width: auto; height: auto; padding: 1px; background: linear-gradient(#05FBFF, #1E00FF);}
.borderBG .inner{ width: 498px; height: 98px; background-color: #fff;}

<div class="borderBG">
    <div class="inner">
        <!-- 内容 -->
    </div>
</div>

手間なやり方でボーダーをグラデーションをする方法

#test{ height: auto;}
#test li{ float: left; font-size: 12pt; font-family: 'Yantramanav', sans-serif; text-align: center; list-style: none; width: 150px; height:auto; margin: 10% 10px; border-left:1px solid #05F9FF; border-right:1px solid #1D64F0;}
#test li:before,
#test li:after{ display:block; content:""; height:1px;  width:100%; margin: 0 0; background:-webkit-gradient(linear, left top, right bottom, from(#05F9FF), to(#1D64F0)); background:-moz-linear-gradient(left, #05F9FF, #1D64F0); background:linear-gradient(left, #05F9FF, #1D64F0); }
.test_box{ padding: 5% 0; width: 100%; overflow: hidden;}

<ul id="test">
    <li><div class="test_box">内容</div></li>
    <li><div class="test_box">内容</div></li>
    <li><div class="test_box">内容</div></li>
</ul>