Create corner border in CSS [duplicate] - html

Question

This question already has answers here:
Any way to limit border length?
(10 answers)
Closed 5 years ago.
How can I create the "blue" and "orange" corners in CSS, like in this image:
Thanks

Answer 1

You can use :before and :after pseudo-classes like this:
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid #000;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -5px;
right: -5px;
border-top: 3px solid blue;
border-right: 3px solid blue;
}
span:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -5px;
left: -5px;
border-bottom: 3px solid orange;
border-left: 3px solid orange;
}
<div><span></span></div>

Answer 2

If you're going to use 'before' and 'after' elements only one HTML tag is required ie. the outermost div in this case and call up the before and after elements on this element. Extra tags add up on the renderer load.
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid #bbb;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -5px;
right: -5px;
border-top: 3px solid blue;
border-right: 3px solid blue;
}
div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -5px;
left: -5px;
border-bottom: 3px solid red;
border-left: 3px solid red;
}
<div></div>

Answer 3

try this
div{
box-sizing:border-box;
}
div.outer{
height:150px;
width:150px;
position:relative;
background:#fff;
padding:2px;
}
div.inner {
border:1px solid #d6d6d6;
height:100%;
width:100%;
}
div.outer:before{
content:"";
background:#F87200;
width:25px;
height:25px;
position:absolute;
bottom:-5px;
left:-5px;
display:block;
z-index: -1;
}
div.outer:after{
content:"";
background:#0092D4;
width:25px;
height:25px;
position:absolute;
top:-5px;
right:-5px;
display:block;
z-index: -1;
}
<div class="outer">
<div class="inner"></div>
</div>