A CodePen by taotsu. Fake Gradient Border - This is a quick and dirty demonstration, how to realize a fake border gradient. I did not want to use images, and I could only find <a href="http://css-tricks.com/examples/GradientBorder/">hacky</a> stuff. Its easy to do: Define the border-color, and continue with the border-top-color and the border-to…

index.html

<header>
    <h1>Fake Gradient Borders</h1>
</header>
<article>
    <section>
        <h2>Default Style</h2>
        <button class="default">Some Text</button>
    </section>
    <section>
        <h2>Black Style</h2>
        <button class="black">Some Text</button>
    </section>
    <section>
        <h2>Transparent Style</h2>
        <button class="transparent">Some Text</button>
    </section>
</article>
<footer>
    <p>coded by <a href="http://taotsu.net">taotsu</a></p>
</footer>

style.css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body,a {
    background-color: #7d0a0b;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 1em auto;
    text-shadow: 0px -2px 0px #000;
    max-width: 30em;
}
a {
  text-decoration: none;
  border-bottom: 1px solid #fff;
}
h1, h2 {
    font-family: Futura;
}
button {
    border: 1px solid; /*bordercolors are defined on each class!*/
    border-radius: 5px;
    color: #fff; /*sadly has to be overwritten...*/
    font-size: 13px;
    font-weight: bold;
    padding: 6px;
    text-shadow: 0px -1px 0px #000; /*sadly has to be overwritten...*/
}
button.default {
    /*fall back*/
    background: #6782a6;
    /*gradient background*/
    background: -moz-linear-gradient(top, rgba(133,148,167,1) 0%, rgba(151,169,193,1) 2%, rgba(65,97,141,1) 93%, rgba(55,84,122,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(133,148,167,1)), color-stop(2%,rgba(151,169,193,1)), color-stop(93%,rgba(65,97,141,1)), color-stop(100%,rgba(55,84,122,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(133,148,167,1) 0%,rgba(151,169,193,1) 2%,rgba(65,97,141,1) 93%,rgba(55,84,122,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(133,148,167,1) 0%,rgba(151,169,193,1) 2%,rgba(65,97,141,1) 93%,rgba(55,84,122,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(133,148,167,1) 0%,rgba(151,169,193,1) 2%,rgba(65,97,141,1) 93%,rgba(55,84,122,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(133,148,167,1) 0%,rgba(151,169,193,1) 2%,rgba(65,97,141,1) 93%,rgba(55,84,122,1) 100%); /* W3C */
    /*fake gradient border*/
    border-color: #6782a6;/*define the general border color*/
    border-top-color:#a3b9d3;
    border-bottom-color:#515965;
}
button.black {
    /*fall back*/
    background: #202020;
    /*gradient background*/
    background: -moz-linear-gradient(top, rgba(94,94,94,1) 0%, rgba(32,32,32,1) 49%, rgba(15,15,15,1) 50%, rgba(16,16,16,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(94,94,94,1)), color-stop(49%,rgba(32,32,32,1)), color-stop(50%,rgba(15,15,15,1)), color-stop(100%,rgba(16,16,16,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(94,94,94,1) 0%,rgba(32,32,32,1) 49%,rgba(15,15,15,1) 50%,rgba(16,16,16,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(94,94,94,1) 0%,rgba(32,32,32,1) 49%,rgba(15,15,15,1) 50%,rgba(16,16,16,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(94,94,94,1) 0%,rgba(32,32,32,1) 49%,rgba(15,15,15,1) 50%,rgba(16,16,16,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(94,94,94,1) 0%,rgba(32,32,32,1) 49%,rgba(15,15,15,1) 50%,rgba(16,16,16,1) 100%); /* W3C */
    /*fake gradient border*/
    border-color: #4b4b4b;/*define the general border color*/
    border-top-color:#7f7f7f;
    border-bottom-color:#2a2a2a;
}
button.transparent {
    /*fall back*/
    background: rgba(255,255,255,0.4);
    /*gradient background*/
    background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* W3C */
    /*fake gradient border*/
    border-color: rgba(255,255,255,0.3);
    border-top-color:rgba(255,255,255,0.7);
    border-bottom-color:rgba(255,255,255,0.1); /*that does not work right, I dont know why...*/
}