jquery - Color border in corners seperatly -
is there way color border corner in css?
i.e. : border-top-left-corner-color: red
if can't done in pure css, can done js/jquery trickery?
you can color each border corner seperately 4 pseudo elements , style each corner's border color, width , style seperatly :
.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; }
<div class="outer"> <div class="inner"></div> </div>
Comments
Post a Comment