Color border in corners seperatly

Question

Is there any way to color a border corner in CSS?

I.e. : border-top-left-corner-color: red

If it can\'t be done in pure CSS, can it be

Answer 1

You can color each border corner seperately with 4 pseudo elements and style each corner's border color, width and style seperatly :

DEMO

.outer{
    width:500px;
    height:500px;
    background:gold;
    position:relative;
}
div:before, div:after{
    content:'';
    position:absolute;
    height:10%;
    width:10%;
}
.outer:after{
    right:0;
    border-right: 3px solid red;
    border-top: 3px solid red;
}
.outer:before{
    border-left: 3px solid green;
    border-top: 3px solid green;
}
.inner:before{
    bottom:0;
    border-left: 3px solid black;
    border-bottom: 3px solid black;
}
.inner:after{
    bottom:0; right:0;
    border-right: 3px solid blue;
    border-bottom: 3px solid blue;
}