How to Create Border In Css Iike - html

Question

here is image .
i want border like this.

Answer 1

You can try something like this:
#mainDiv {
height: 100px;
width: 80px;
position: relative;
background: grey;
}
.bottom-left-corner {
margin: -5px;
border-left: 1px solid orange;
border-bottom: 1px solid orange;
position: absolute;
top: 25%;
bottom: 0;
right: 25%;
left: 0;
}
.top-right-corner {
margin: -5px;
border-right: 1px solid #aaaafa;
border-top: 1px solid #aaaafa;
position: absolute;
top: 0;
bottom: 25%;
right: 0;
left: 25%;
}
<div id="mainDiv">
<div class="bottom-left-corner"></div>
<div class="top-right-corner"></div>
</div>
Regards,

Answer 2

How about something like this?
http://codepen.io/anon/pen/GWrzPX
<div class="image">
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
<span class="blue"></span>
<span class="red"></span>
</div>
.image{position:relative;width:200px;height:200px}
.red{position:absolute;top:0px;right:0px;margin-right:0px;width:50%;height:50%;background:red;}
.blue{position:absolute;bottom:0px;left:0px;width:50%;height:50%;background:blue}
img{background:#fff;position:absolute;z-index:100;padding:0px;margin:1px;width:198px;height:198px;}

Answer 3

HTML
<div class="example">
<div>
<img src="http://www.seowordpress.pl/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png">
</div>
</div>
CSS
.example {
position: relative;
width: 200px;
height: 200px;
padding: 5%;
}
img {
width: 100%;
}
.example:after {
position:absolute;
width: 120px;
height: 120px;
border: solid orange;
content: ' ';
}
.example>:first-child:after {
position: absolute;
width: 120px;
height: 120px;
border: solid lightblue;
content: ' ';
}
.example:after {
right:0;
top:0;
border-width: 2px 2px 0 0;
}
.example>:first-child:after {
left: 0;
bottom: 0;
border-width: 0 0 2px 2px;
}
https://jsfiddle.net/xcanndy/t1wa825f/