Is it possible to make a gradient border?

Question

As the title states, is it possible to make a gradient border in CSS3 and if so how? I know that you can make gradient backgrounds and there are many generators for that, bu

Answer 1

1.

Well.. this is no fancy css3 but heres one possible solution:

I made this example for something else before and i just changed the background url of #childWrap

http://jsfiddle.net/qD4zd/1/ ( note that the gradient isnt very flexible as it is done with images. )

Basic idea is that if you have element that you want to frame with a border with a gradient, pattern or just image you should wrap that element inside another which you will use as the border.

---

2.

A little more flexible gradient: Another thing you might want to try is http://www.css3pie.com and use the gradient background in outer element to create a border like in my example jsfiddle.

OR

http://www.colorzilla.com/gradient-editor/

( http://jsfiddle.net/qD4zd/2/ )

---

3.

On a third note.. The first method could be made into more flexible one by using actual <img> tag so that you force the image to be specific height and width.. could even look decent.

Answer 2

Nothing to do much just add following code:

 border-image: linear-gradient(to bottom, black 0%, white 100%);
  /* border-image-slice: 1;*/

just add above code to the element and border-image-slice property will set the inner offsets of the element.

Answer 3

See the answer to this question: CSS3 Gradient Borders.

Basically, it will only work in Firefox at the moment. You could just use pseudo-elements positioned behind the actual element with gradients on them to create a similar effect, though.

Answer 4

may be other work for you but i have very simple tips for you just replace background-image to border-image like

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
background-color:#124f7e;

border-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
border-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
border-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
border-color:#124f7e;

Answer 5

You can try this:

div {
  width: 170px;
  height: 48px;
  border-radius: 24px;
  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>button</div>

Answer 6

Just use ::before

.card::before{
           content: '';
          width: 100%;
          position: absolute;
          height: 5px;
          top:0;
          left: 0;
          border-radius:5px 5px 0 0;

          background-color: hsl(195, 100%, 50%);
    }