Multiple color border around image [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
How can I create a 2 color border like this around an image?
Like this:
This is for an HTML website. What CSS should I use? Thanks in advance :)

Answer 1

Fiddle Link
CSS
#mainDiv {
height: 200px;
width: 560px;
position: relative;
border-bottom: 8px solid #f51c40;
background: #3beadc;
border-top: 4px solid yellow;
}
#borderLeftbottom {
border-left: 8px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
#borderRightbottom{
border-right: 8px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
right:0;
}
#borderLefttop {
border-left: 4px solid yellow;
position: absolute;
top: 0;
bottom: 50%;
}
#borderRighttop{
border-right: 4px solid yellow;
position: absolute;
top: 0;
bottom: 50%;
right:0;
}
HTML
<div id="mainDiv"><img src="https://www.google.com/images/srpr/logo11w.png" alt="google" />
<div id="borderLeftbottom"></div>
<div id="borderRightbottom"></div>
<div id="borderLefttop"></div>
<div id="borderRighttop"></div>
</div>

Answer 2

Fully reusable solution for any image - just need to wrap it with a div with class .multipleBorder
FIDDLE
1) Wrap the image in a div.
2) Give the div padding: say 12px - 10px for outer border and 2px for inner border
3) Create pseudo elements :before and :after the div - each with 50% height
4) Set a border and background for each pseudo element (background is used as inner border)
5) Remove the bottom border of the top element and the top border of the bottom element.
Done!
Markup
<div class="multipleBorder">
<img src="http://placehold.it/600x150" alt="" width="600px" height="150px" />
</div>
CSS
.multipleBorder
{
position: relative;
display: inline-block;
padding: 12px;
}
.multipleBorder:before, .multipleBorder:after
{
content: '';
position: absolute;
top:0;
left:0;
width:100%;
height: 50%;
border: 10px solid silver;
border-bottom: none;
background: maroon;
z-index: -1;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.multipleBorder:after
{
bottom:0;
top: auto;
border: 10px solid maroon;
border-top: none;
background: silver;
}