css - Border with color gradient from left, top, bottom and right -


i add border white color @ top left, top right dark blue, bottom left dark grey , bottom right light grey/light blue, gradient?

is possible css or should use background image? enter image description here

you use :before pseudo element , linear-gradient create border-like effect.

.element {    background: white;    position: relative;    width: 200px;    height: 150px;    margin: 50px;  }  .element:before {    content: '';    position: absolute;    left: -5px;    top: -5px;    width: calc(100% + 10px);    height: calc(100% + 10px);    background: linear-gradient(45deg, rgba(220, 218, 219, 1) 0%, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 59%, rgba(125, 188, 220, 1) 100%);    z-index: -1;  }
<div class="element"></div>


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -