Element with gradient border

by Bianca Kuehweidner

HTML

<div class="border1"></div>
<br />
<div class="border2"></div>

CSS

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

.border2 {
    width: 250px;
    height: 100px;
    margin: auto;
    background: transparent;
    border-left: 35px solid transparent;
    /*
    -moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    */
    border-image: linear-gradient(to bottom, #eee 10%, #bbb 100%);
    border-image-slice: 1;
}