CODEWITHSUNDEEP
htmlcssborderlinear-gradients
rahul patel
rahul patel

Reputation: 362

4 gradient borders in CSS

I need help applying a gradient border on all the 4 sides of a box. I tried it, but it only works for two sides. After looking at all the links and SO answers I have got this:

.test{
  height:250px;
  border: 2px solid;
  border-image: linear-gradient(to left,rgba(78,137,176,1)  1%, rgba(115,192,85,1)  100%) 100% 0 100% 0/2px 0 2px 0;
  padding-top:50px;
}
<div class="test">
  This is a box and I want borders for all the sides
</div>

I would appreciate any help. I am trying something similar to the image below. Thank you.

enter image description here

Upvotes: 5

Views: 20434

Answers (2)

al-bulat
al-bulat

Reputation: 176

I realized this for myself in this way:

the background changes inside the background-image. 

div {
  width: 170px;
  height: 48px;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(to bottom, #fff042, #ff5451);
  border-image-slice: 1;
  background-image: linear-gradient(to bottom, #f9e6e6, #c5e0c3), linear-gradient(to bottom, #fff042, #ff5451);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
<div>text</div>

Upvotes: -1

Harry
Harry

Reputation: 89750

Using background image: (produces the exact output as your image)

You seem to be having gradients that are different on each sides and so it is difficult to achieve this with the border-image property. You could try and mimic the behavior using background-image like in the below snippet.

Basically what the below snippet does is that it creates the gradient for each of the 4 sides as gradient background image strips and then uses background-position to place them on the correct location.

The transparent border on parent is a placeholder where the mimiced border would end up appearing. The background-origin: border-box makes the background of the element start from border-box area itself (and not padding-box or content-box). These two are just extra steps to avoid the usage of unnecessary calc stuff in the background-position.

.test {
  height: 250px;
  border: 2px solid transparent;
  background-image: linear-gradient(to right, rgb(187, 210, 224), rgb(203, 231, 190)), linear-gradient(to bottom, rgb(114, 191, 87), rgb(116, 191, 86)), linear-gradient(to left, rgb(204, 233, 187), rgb(187, 210, 224)), linear-gradient(to top, rgb(84, 144, 184), rgb(80, 138, 176));
  background-origin: border-box;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
  padding-top: 50px;
}
<div class="test">
  This is a box and i want border for all the side
</div>

Using border image: (produces a border on all 4 sides but not same output as your image)

The best output that you could get with border-image property would be the below but as you can see from the demo it is not exactly the same as your image (or the first snippet's output):

.test {
  height: 250px;
  border: 2px solid;
  border-image: linear-gradient(to left, rgba(78, 137, 176, 1) 1%, rgba(115, 192, 85, 1) 100%);
  border-image-slice: 1;
  padding-top:50px;
}
<div class="test">
  This is a box and i want border for all the side
</div>

Upvotes: 14

Related Questions