Tag Archives: Gradient Border

How to style Gradient Border Color

Again CSS3! Proof that how to use style based websites in state of image-less. In the past, the use of the image was inevitable when it comes to showing gradient colors. Today, it becomes much cleaner with the use of CSS3 Gradient Border color.
Following I have made a little example by applying CSS3 Gradient border color. Well, let’s see how the trick works.

CSS Gradient Border
CSS Gradient Border

The DOM

 <div class="contianer">
 <h2 class="box-header">Gradient Borders</h2>
 <div class="box-wrap">
 <div class="box top">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 <div class="box right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 <div class="box bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 <div class="box left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 </div>
</div>

The CSS

         * {
            margin: 0px;
            padding: 0px;
        }

        .contianer {
            width: 800px;
            margin: 0px auto;
        }

        .box-header {
            padding: 5px 0px;
            margin: 20px 0px;
            border-bottom: 5px solid transparent;
	        border-image: linear-gradient(to right, #0099CC 0%, #F27280 100%);
	        border-image-slice: 1
        }

        .box-wrap {
            display: flex;
            flex-wrap: wrap;
        }

        .box {
            flex-basis: 0;
            flex-grow: 1;
            background: #F6F6F6;
            min-width: 300px;
            color: #000;
            padding: 10px;
            margin: 10px;

            /*CSS for gradient border*/
            border: 5px solid transparent;
        }

        .box.top {
	    /*CSS for gradient border*/
	    border-image: linear-gradient(to top, #0099CC 0%, #F27280 100%);
            border-image-slice: 1;
        }

        .box.right {
	    /*CSS for gradient border*/
	    border-image: linear-gradient(to right, #0099CC 0%, #F27280 100%);
            border-image-slice: 1;
        }

        .box.bottom {
	    /*CSS for gradient border*/
	    border-image: linear-gradient(to bottom, #0099CC 0%, #F27280 100%);
            border-image-slice: 1;
        }

        .box.left {
	    /*CSS for gradient border*/
	    border-image: linear-gradient(to left, #0099CC 0%, #F27280 100%);
            border-image-slice: 1;
        }