Is it possible to make a gradient border? [duplicate] - css

Question

This question already has answers here:
Gradient borders
(20 answers)
Closed 2 years ago.
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, but I am yet to find one that creates the code for a gradient border.

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

Here is a possibility to create a gradient shadow border with CSS3:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
border: 4px solid rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 20px #000;
-moz-box-shadow: inset 0 0 20px #000;
-ms-box-shadow: inset 0 0 20px #000;
box-shadow: inset 0 0 20px #000;
Practically this will create an inner shadow border with 10px radius at the edges.

Answer 3

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 4

Border with linear gradient.
HTML
<div id="input_parameters">
...Some HTML...
</div>
CSS
#input_parameters {
border: 10px solid transparent;
border-image: linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);
-webkit-border-image: -webkit-linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);
border-image-slice: 1;
}

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

here is an example of a gradient border that would work under Firefox:
#gradbor {
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
}
Try something like that in your CSS for it to work.
EDIT: I'm not sure if it will work at all on other browsers.

Answer 7

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 8

i used the span element instead to use as border by setting its css property. below is my code
<div id="main_container">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
<span class="borderH"></span>
<span class="borderV"></span>
</div>
n here is my css -
#main_container{
position:relative;
width:480px;
height:480px;
background:#f9f9f9;
border:1px solid #ff0000;
left:20%;
top:100px;
}
.tl { position: absolute; top: 0; left: 0; /*background: #ff0000;*/ border-right:1px none #000;width:50%;height:50%; }
.tr { position: absolute; top: 0; left: 50%;/*background: blue;*/ border-bottom:1px none #000;width:50%;height:50%;}
.bl { position: absolute; top: 50%; left: 0; /*background: yellow;*/ border-top:1px none #000;width:50%;height:50%; }
.br { position: absolute; top: 50%; left: 50%; /*background: #80ff80;*/border-left:1px none #000;width:50%;height:50%; }
.borderH{
position: absolute; left: 0; top: 50%;height:1px;width:100%;
background: -webkit-linear-gradient(left, #ff0000 , #80ff80); /* For Safari */
background: -o-linear-gradient(right, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}
.borderV{
position: absolute; top: 0; left: 50%;width:1px;height:100%;
background: -webkit-linear-gradient(top, #ff0000 , #80ff80); /* For Safari */
background: -o-linear-gradient(bottom, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}
this code will generate the output like this https://drive.google.com/file/d/0B2sRswnexZtfUVlTM0t2dWI3cjA/edit?usp=sharing

Answer 9

Here's a solution that creates a colorful gradient border, like you can see at the top of sites such as Gumroad or Vimeo, e.g.:
<div class="u-border-top-rainbow">Lorem ipsum fu fu ma li ma coco go yo.</div>
.u-border-top-rainbow {
border-style: solid;
border-width: 30px 0 0 0;
/* For a gradient repeated 3 times */
border-image-source: repeating-linear-gradient(to right,
hsla( 8, 78%, 63%, 1.00 ) 00.00%,
hsla( 8, 78%, 63%, 1.00 ) 03.03%,
hsla( 9, 85%, 58%, 1.00 ) 03.03%,
hsla( 9, 85%, 58%, 1.00 ) 06.06%,
hsla( 12, 100%, 47%, 1.00 ) 06.06%,
hsla( 12, 100%, 47%, 1.00 ) 09.09%,
hsla( 352, 70%, 47%, 1.00 ) 09.09%,
hsla( 352, 70%, 47%, 1.00 ) 12.12%,
hsla( 355, 76%, 38%, 1.00 ) 12.12%,
hsla( 355, 76%, 38%, 1.00 ) 15.15%,
hsla( 2, 78%, 32%, 1.00 ) 15.15%,
hsla( 2, 78%, 32%, 1.00 ) 18.18%,
hsla( 183, 100%, 30%, 1.00 ) 18.18%,
hsla( 183, 100%, 30%, 1.00 ) 21.21%,
hsla( 183, 95%, 27%, 1.00 ) 21.21%,
hsla( 183, 95%, 27%, 1.00 ) 24.24%,
hsla( 183, 100%, 22%, 1.00 ) 24.24%,
hsla( 183, 100%, 22%, 1.00 ) 27.27%,
hsla( 43, 92%, 54%, 1.00 ) 27.27%,
hsla( 43, 92%, 54%, 1.00 ) 30.30%,
hsla( 38, 100%, 48%, 1.00 ) 30.30%,
hsla( 38, 100%, 48%, 1.00 ) 33.33%
);
border-image-slice: 1;
}
Codepen: Colorful CSS gradient border, à la Gumroad or Vimeo
The gradient could be written in half the size with the double stop notation, in this fashion:
background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
…unfortunately, such syntax is not supported by Safari as of yet.

Answer 10

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%);
}