CODEWITHSUNDEEP
cssborder
alias51
alias51

Reputation: 8608

How to create triple div border in CSS

I want to create the following div border: enter image description here I have the green border part sorted, but not the red line along the top. Any ideas?

Code so far:

#myborder {
border: 4px solid green;
}

Upvotes: 0

Views: 2339

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28437

Working on Hushme's answer: http://jsfiddle.net/PESHk/2/

#myborder {
    box-shadow: 0 0 0 4px  green, 0 0 0 4px  green inset;
    border-top: 2px solid red;
    padding: 8px;
}

And here by using ::before:

#myborder {
    box-shadow: 0px 4px 15px rgba(0,0,0,0.15);
    border: 8px solid green;
    border-top: 0;
    padding: 16px 8px 8px 8px;
    position: relative;
}

#myborder::before {
    width: 100%;
    background: red;
    height: 2px;
    border: 4px solid green;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;  
}

Upvotes: 2

Hushme
Hushme

Reputation: 3144

use this css http://jsfiddle.net/PESHk/3

#myborder {
    box-shadow: 0 0 0 4px  green, 0 0 0 4px  green inset;
    border-top:2px solid red;
    padding:8px;
}

Upvotes: 4

Related Questions