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 :

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;  }
<div class="outer">      <div class="inner"></div>  </div>


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -