Gradient border line of the div as example here

Question

I want to put a gradient color border line just on the left side of the div

three colors repeated vertically: #F8F2CE, #CFCB9C, #EFEDBD

like this

I'm sorry, I don't understand should I put that webkit code under .div { } ? — mario, Sep 09 '16 at 07:03

Kas Elvirov · Accepted Answer · 2016-09-09T11:38:19.513

I think it helps you

p.test {
    position: relative;
    padding: 10px;
    margin: 0 0 1em;
    width: 300px;
}
.test:before {
    background: #F8F2CE; /* For browsers that do not support gradients */
    background: -moz-linear-gradient(#F8F2CE, #CFCB9C, #EFEDBD); /* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(#F8F2CE, #CFCB9C, #EFEDBD); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#F8F2CE, #CFCB9C, #EFEDBD); /* For Opera 11.1 to 12.0 */
    background: linear-gradient(to #F8F2CE, #CFCB9C , #EFEDBD); /* Standard syntax */
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    width: 10px; /* Border width */ 
    height: 100%;
}

<p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet lobortis justo. Phasellus elit diam, interdum eu varius sed, semper sit amet lacus. Morbi hendrerit accumsan ante a dignissim. Etiam non elit non velit auctor auctor vel vel orci. Etiam sed mauris vitae mi dapibus auctor. Praesent eleifend dapibus sodales. Nam facilisis dolor ut sagittis mollis. Mauris scelerisque nunc nec lacus egestas, in pellentesque lectus ultricies. Nullam vestibulum sagittis augue, ac gravida orci suscipit sit amet. Duis elementum nisi enim, nec vulputate felis blandit id. Aenean mauris mauris, dapibus ut consectetur vitae, aliquam sollicitudin dolor. Maecenas at purus eget eros ullamcorper semper eu in nunc.
    
    Nam ultrices lectus lorem, a ultrices urna gravida vel. Sed ultrices ex sit amet libero semper rhoncus. Duis sollicitudin mi lectus, id suscipit sapien hendrerit vitae. Integer vel ultricies tortor. Vivamus vitae tempor dui. Sed posuere nibh finibus ipsum imperdiet scelerisque. Phasellus bibendum laoreet sem vitae elementum.</p>

Other solutions:

Border-image ( support )

Helpful links:

Great, just a thing: tried to decrease width but does not work. Thanks — mario, Sep 09 '16 at 07:10
@mario Look at `.test:before {... width: 10px; ... }`. It's a border-width. — Kas Elvirov, Sep 09 '16 at 07:13
@mario It works for all browsers. You need to change value in `width: 10px; /* Border width */ ` — Kas Elvirov, Sep 09 '16 at 11:15
Thank you very much! Yours seems lighter, can you tell me how can I do it more similar to the original? It's very difficult to me understand why http://i.imgur.com/mlbqI9m.gif — mario, Sep 09 '16 at 12:04

score 0 · Answer 2 · answered Sep 09 '16 at 07:19

<div style="
    border-left: 1px solid #F8F2CE;
">
    <div style="
    border-left: 1px solid #CFCB9C;
">
        <div style="
    border-left: 1px solid #EFEDBD;
"> 
            this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content. 
        </div>
    </div>
</div>

i tried some CSS ,but id failed. so i use dom. is it what you want. i,ll keep on this qustion for answer with css — echo, Sep 09 '16 at 07:21
it's very useful, thank you very much, how to increase padding? — mario, Sep 09 '16 at 10:33
box-shadow: -1px 0px 0px #EFEDBD,-2px 0px 0px #CFCB9C,-3px 0px 0px #F8F2CE; this is the CSS method, add padding as usual , what you mean about "how to increase padding" — echo, Sep 13 '16 at 05:55

Gradient border line of the div as example here

2 Answers2