CSS border gradients

Two methods of creating border gradients.

by Ayyappan Sakthivadivel

HTML

<div class="one">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.test</div>

<div class="two">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</div>

CSS

/* Using only background gradients */

.one { 
    width: 400px;
    padding: 20px 25px;
    border-top: 5px solid #000;
    margin: 40px auto;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image:
        -moz-linear-gradient(#000, transparent),
        -moz-linear-gradient(#000, transparent)
    ;
    background-image:
        -o-linear-gradient(#000, transparent),
        -o-linear-gradient(#000, transparent)
    ;
    background-image: 
        linear-gradient(#000, transparent),
        linear-gradient(#000, transparent)
    ;
    -moz-background-size:5px 100%;
    background-size:5px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

/* Using pseudo-elements and background gradients */

.two {
    position: relative;
    width: 100%;
    border: 5px solid transparent;
    border-top-color: #000;
    margin: 40px auto;
}

.two:before,
.two:after {
    content: "";
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    width: 5px;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image: -moz-linear-gradient(#000, transparent);
    background-image: -o-linear-gradient(#000, transparent);
    background-image: linear-gradient(#000, transparent);
}

.two:after {
    left: auto;
    right: -5px;
}