테스트 결과

<style>
.gra_width{ /* 좌측색: #000000 , 우측색: #ff0000 */
border-top:1px solid #cc3300;
border-left:1px solid #cc0000;
border-right:1px solid #990000;
border-bottom:1px solid #993300;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #000000 0%, #ff0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 0%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 0%,#ff0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 0%,#ff0000 100%); /* IE10+ */
background: linear-gradient(to right, #000000 0%,#ff0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
}
.gra_height{ /* 하단색: #00ccff , 상단색 : #3300ff */
border-top:1px solid #0000ff;
border-left:1px solid #3300cc;
border-right:1px solid #330099;
border-bottom:1px solid #330066;
background: #3300ff; /* Old browsers */
background: -moz-linear-gradient(top, #00ccff 0%, #3300ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ccff), color-stop(100%,#3300ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00ccff 0%,#3300ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00ccff 0%,#3300ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00ccff 0%,#3300ff 100%); /* IE10+ */
background: linear-gradient(to bottom, #00ccff 0%,#3300ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ccff', endColorstr='#3300ff',GradientType=0 ); /* IE6-9 */
}
</style>

<div style="width:100px;height:100px;margin:20px" class="gra_width"></div>
<div style="width:100px;height:100px;margin:20px" class="gra_height"></div>

- css3 적용 브라우저 및 모바일에서 사용가능