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

6
votes

I would like to add a border which is white color at the top left, top right with dark blue, bottom left with dark grey and bottom right with light grey/light blue, with a gradient?

Is this possible with css or should I use a background image? enter image description here

1
css

1 Answers

6
votes

You could use :before pseudo element and linear-gradient to 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>