How to create multi-color border in css3
17
How to create multi-color border in css3 like image below?
css css3 border css-shapes
edited Nov 16 '18 at 7:49
Mohammad Usman
21.4k124758
asked Aug 9 '16 at 12:13
Hamed mayahianHamed mayahian
1,41551841
add a comment |
17
How to create multi-color border in css3 like image below?
css css3 border css-shapes
edited Nov 16 '18 at 7:49
Mohammad Usman
21.4k124758
asked Aug 9 '16 at 12:13
Hamed mayahianHamed mayahian
1,41551841
1
jsfiddle.net/yH59y
– Roysh
Aug 9 '16 at 12:17
1
you can use a border image: w3schools.com/cssref/css3_pr_border-image.asp
– Andrew
Aug 9 '16 at 12:17
1
try this: hongkiat.com/blog/css-gradient-border
– Sanjeev Kumar
Aug 9 '16 at 12:17
add a comment |
17
17
17
10
How to create multi-color border in css3 like image below?
css css3 border css-shapes
edited Nov 16 '18 at 7:49
Mohammad Usman
21.4k124758
asked Aug 9 '16 at 12:13
Hamed mayahianHamed mayahian
1,41551841
How to create multi-color border in css3 like image below?
css css3 border css-shapes
css css3 border css-shapes
edited Nov 16 '18 at 7:49
Mohammad Usman
21.4k124758
asked Aug 9 '16 at 12:13
Hamed mayahianHamed mayahian
1,41551841
edited Nov 16 '18 at 7:49
Mohammad Usman
21.4k124758
asked Aug 9 '16 at 12:13
Hamed mayahianHamed mayahian
1,41551841
edited Nov 16 '18 at 7:49
Mohammad Usman
21.4k124758
edited Nov 16 '18 at 7:49
Mohammad Usman
21.4k124758
edited Nov 16 '18 at 7:49
Mohammad Usman
21.4k124758
21.4k124758
asked Aug 9 '16 at 12:13
Hamed mayahianHamed mayahian
1,41551841
asked Aug 9 '16 at 12:13
Hamed mayahianHamed mayahian
1,41551841
asked Aug 9 '16 at 12:13
Hamed mayahianHamed mayahian
1,41551841
1,41551841
1
jsfiddle.net/yH59y
– Roysh
Aug 9 '16 at 12:17
1
you can use a border image: w3schools.com/cssref/css3_pr_border-image.asp
– Andrew
Aug 9 '16 at 12:17
1
try this: hongkiat.com/blog/css-gradient-border
– Sanjeev Kumar
Aug 9 '16 at 12:17
add a comment |
1
jsfiddle.net/yH59y
– Roysh
Aug 9 '16 at 12:17
1
you can use a border image: w3schools.com/cssref/css3_pr_border-image.asp
– Andrew
Aug 9 '16 at 12:17
1
try this: hongkiat.com/blog/css-gradient-border
– Sanjeev Kumar
Aug 9 '16 at 12:17
1
1
jsfiddle.net/yH59y
– Roysh
Aug 9 '16 at 12:17
jsfiddle.net/yH59y
– Roysh
Aug 9 '16 at 12:17
1
1
you can use a border image: w3schools.com/cssref/css3_pr_border-image.asp
– Andrew
Aug 9 '16 at 12:17
you can use a border image: w3schools.com/cssref/css3_pr_border-image.asp
– Andrew
Aug 9 '16 at 12:17
1
1
try this: hongkiat.com/blog/css-gradient-border
– Sanjeev Kumar
Aug 9 '16 at 12:17
try this: hongkiat.com/blog/css-gradient-border
– Sanjeev Kumar
Aug 9 '16 at 12:17
add a comment |
3 Answers
3
active
oldest
votes
27
You can do it with :after or :before psuedo element and css linear-gradient as shown below:
body {
background: #ccc;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 300px;
}
.box:after {
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
position: absolute;
content: '';
height: 4px;
right: 0;
left: 0;
top: 0;
}<div class="box">Div</div>answered Aug 9 '16 at 12:20
Mohammad UsmanMohammad Usman
21.4k124758
it Work! thanks
– Hamed mayahian
Aug 9 '16 at 12:30
@Radian you are welcome)
– Mohammad Usman
Aug 9 '16 at 13:07
add a comment |
24
You can do it without pseudo-elements, just with border-image: linear-gradient
.fancy-border {
width: 150px;
height: 150px;
text-align:center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}<div class="fancy-border">
my content
</div>answered Aug 9 '16 at 12:31
Theodore K.Theodore K.
3,13721438
4
This should be the top answer, it's way less hacky than the currently accepted one.
– Erick
Aug 28 '17 at 20:57
How to do it with just 3 colors?
– Edgar Aroutiounian
Mar 11 '18 at 2:53
@EdgarAroutiounian just edit the percentages to match. If you only want 3 colors, then divide "100%/3" wich will be 33,33%. Insted of 25% then specify "33%" and so on and you will have only three colors.
– Rasmus Lauridsen
Sep 1 '18 at 9:33
add a comment |
2
Try it.
<div class="test"></div>
.test {
width: 500px;
height: 100px;
background-color: #ccc;
position: relative;
}
.test:before, .test:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
height: 10px;
background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-size: 80px;
}
.test:before {
top: 0px;
}
.test:after {
bottom: 0px;
}
See Demo
http://jsfiddle.net/yH59y/
answered Aug 9 '16 at 12:18
Neeraj PrajapatiNeeraj Prajapati
252113
this will not work in firefox, only in chrome
– Sanjeev Kumar
Aug 9 '16 at 12:21
It's just the link from the comment?
– Magesh Kumaar
Aug 9 '16 at 12:21
for firefox: -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
– Neeraj Prajapati
Aug 9 '16 at 12:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38850419%2fhow-to-create-multi-color-border-in-css3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
27
You can do it with :after or :before psuedo element and css linear-gradient as shown below:
body {
background: #ccc;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 300px;
}
.box:after {
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
position: absolute;
content: '';
height: 4px;
right: 0;
left: 0;
top: 0;
}<div class="box">Div</div>answered Aug 9 '16 at 12:20
Mohammad UsmanMohammad Usman
21.4k124758
it Work! thanks
– Hamed mayahian
Aug 9 '16 at 12:30
@Radian you are welcome)
– Mohammad Usman
Aug 9 '16 at 13:07
add a comment |
27
You can do it with :after or :before psuedo element and css linear-gradient as shown below:
body {
background: #ccc;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 300px;
}
.box:after {
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
position: absolute;
content: '';
height: 4px;
right: 0;
left: 0;
top: 0;
}<div class="box">Div</div>answered Aug 9 '16 at 12:20
Mohammad UsmanMohammad Usman
21.4k124758
it Work! thanks
– Hamed mayahian
Aug 9 '16 at 12:30
@Radian you are welcome)
– Mohammad Usman
Aug 9 '16 at 13:07
add a comment |
27
27
27
You can do it with :after or :before psuedo element and css linear-gradient as shown below:
body {
background: #ccc;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 300px;
}
.box:after {
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
position: absolute;
content: '';
height: 4px;
right: 0;
left: 0;
top: 0;
}<div class="box">Div</div>answered Aug 9 '16 at 12:20
Mohammad UsmanMohammad Usman
21.4k124758
You can do it with :after or :before psuedo element and css linear-gradient as shown below:
body {
background: #ccc;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 300px;
}
.box:after {
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
position: absolute;
content: '';
height: 4px;
right: 0;
left: 0;
top: 0;
}<div class="box">Div</div>body {
background: #ccc;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 300px;
}
.box:after {
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
position: absolute;
content: '';
height: 4px;
right: 0;
left: 0;
top: 0;
}<div class="box">Div</div>body {
background: #ccc;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 300px;
}
.box:after {
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
position: absolute;
content: '';
height: 4px;
right: 0;
left: 0;
top: 0;
}<div class="box">Div</div>answered Aug 9 '16 at 12:20
Mohammad UsmanMohammad Usman
21.4k124758
answered Aug 9 '16 at 12:20
Mohammad UsmanMohammad Usman
21.4k124758
answered Aug 9 '16 at 12:20
Mohammad UsmanMohammad Usman
21.4k124758
answered Aug 9 '16 at 12:20
Mohammad UsmanMohammad Usman
21.4k124758
21.4k124758
it Work! thanks
– Hamed mayahian
Aug 9 '16 at 12:30
@Radian you are welcome)
– Mohammad Usman
Aug 9 '16 at 13:07
add a comment |
it Work! thanks
– Hamed mayahian
Aug 9 '16 at 12:30
@Radian you are welcome)
– Mohammad Usman
Aug 9 '16 at 13:07
it Work! thanks
– Hamed mayahian
Aug 9 '16 at 12:30
it Work! thanks
– Hamed mayahian
Aug 9 '16 at 12:30
@Radian you are welcome)
– Mohammad Usman
Aug 9 '16 at 13:07
@Radian you are welcome)
– Mohammad Usman
Aug 9 '16 at 13:07
add a comment |
24
You can do it without pseudo-elements, just with border-image: linear-gradient
.fancy-border {
width: 150px;
height: 150px;
text-align:center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}<div class="fancy-border">
my content
</div>answered Aug 9 '16 at 12:31
Theodore K.Theodore K.
3,13721438
4
This should be the top answer, it's way less hacky than the currently accepted one.
– Erick
Aug 28 '17 at 20:57
How to do it with just 3 colors?
– Edgar Aroutiounian
Mar 11 '18 at 2:53
@EdgarAroutiounian just edit the percentages to match. If you only want 3 colors, then divide "100%/3" wich will be 33,33%. Insted of 25% then specify "33%" and so on and you will have only three colors.
– Rasmus Lauridsen
Sep 1 '18 at 9:33
add a comment |
24
You can do it without pseudo-elements, just with border-image: linear-gradient
.fancy-border {
width: 150px;
height: 150px;
text-align:center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}<div class="fancy-border">
my content
</div>answered Aug 9 '16 at 12:31
Theodore K.Theodore K.
3,13721438
4
This should be the top answer, it's way less hacky than the currently accepted one.
– Erick
Aug 28 '17 at 20:57
How to do it with just 3 colors?
– Edgar Aroutiounian
Mar 11 '18 at 2:53
@EdgarAroutiounian just edit the percentages to match. If you only want 3 colors, then divide "100%/3" wich will be 33,33%. Insted of 25% then specify "33%" and so on and you will have only three colors.
– Rasmus Lauridsen
Sep 1 '18 at 9:33
add a comment |
24
24
24
You can do it without pseudo-elements, just with border-image: linear-gradient
.fancy-border {
width: 150px;
height: 150px;
text-align:center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}<div class="fancy-border">
my content
</div>answered Aug 9 '16 at 12:31
Theodore K.Theodore K.
3,13721438
You can do it without pseudo-elements, just with border-image: linear-gradient
.fancy-border {
width: 150px;
height: 150px;
text-align:center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}<div class="fancy-border">
my content
</div>.fancy-border {
width: 150px;
height: 150px;
text-align:center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}<div class="fancy-border">
my content
</div>.fancy-border {
width: 150px;
height: 150px;
text-align:center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}<div class="fancy-border">
my content
</div>answered Aug 9 '16 at 12:31
Theodore K.Theodore K.
3,13721438
edited Aug 9 '16 at 12:46
answered Aug 9 '16 at 12:31
Theodore K.Theodore K.
3,13721438
answered Aug 9 '16 at 12:31
Theodore K.Theodore K.
3,13721438
answered Aug 9 '16 at 12:31
Theodore K.Theodore K.
3,13721438
3,13721438
4
This should be the top answer, it's way less hacky than the currently accepted one.
– Erick
Aug 28 '17 at 20:57
How to do it with just 3 colors?
– Edgar Aroutiounian
Mar 11 '18 at 2:53
@EdgarAroutiounian just edit the percentages to match. If you only want 3 colors, then divide "100%/3" wich will be 33,33%. Insted of 25% then specify "33%" and so on and you will have only three colors.
– Rasmus Lauridsen
Sep 1 '18 at 9:33
add a comment |
4
This should be the top answer, it's way less hacky than the currently accepted one.
– Erick
Aug 28 '17 at 20:57
How to do it with just 3 colors?
– Edgar Aroutiounian
Mar 11 '18 at 2:53
@EdgarAroutiounian just edit the percentages to match. If you only want 3 colors, then divide "100%/3" wich will be 33,33%. Insted of 25% then specify "33%" and so on and you will have only three colors.
– Rasmus Lauridsen
Sep 1 '18 at 9:33
4
4
This should be the top answer, it's way less hacky than the currently accepted one.
– Erick
Aug 28 '17 at 20:57
This should be the top answer, it's way less hacky than the currently accepted one.
– Erick
Aug 28 '17 at 20:57
How to do it with just 3 colors?
– Edgar Aroutiounian
Mar 11 '18 at 2:53
How to do it with just 3 colors?
– Edgar Aroutiounian
Mar 11 '18 at 2:53
@EdgarAroutiounian just edit the percentages to match. If you only want 3 colors, then divide "100%/3" wich will be 33,33%. Insted of 25% then specify "33%" and so on and you will have only three colors.
– Rasmus Lauridsen
Sep 1 '18 at 9:33
@EdgarAroutiounian just edit the percentages to match. If you only want 3 colors, then divide "100%/3" wich will be 33,33%. Insted of 25% then specify "33%" and so on and you will have only three colors.
– Rasmus Lauridsen
Sep 1 '18 at 9:33
add a comment |
2
Try it.
<div class="test"></div>
.test {
width: 500px;
height: 100px;
background-color: #ccc;
position: relative;
}
.test:before, .test:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
height: 10px;
background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-size: 80px;
}
.test:before {
top: 0px;
}
.test:after {
bottom: 0px;
}
See Demo
http://jsfiddle.net/yH59y/
answered Aug 9 '16 at 12:18
Neeraj PrajapatiNeeraj Prajapati
252113
this will not work in firefox, only in chrome
– Sanjeev Kumar
Aug 9 '16 at 12:21
It's just the link from the comment?
– Magesh Kumaar
Aug 9 '16 at 12:21
for firefox: -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
– Neeraj Prajapati
Aug 9 '16 at 12:39
add a comment |
2
Try it.
<div class="test"></div>
.test {
width: 500px;
height: 100px;
background-color: #ccc;
position: relative;
}
.test:before, .test:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
height: 10px;
background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-size: 80px;
}
.test:before {
top: 0px;
}
.test:after {
bottom: 0px;
}
See Demo
http://jsfiddle.net/yH59y/
answered Aug 9 '16 at 12:18
Neeraj PrajapatiNeeraj Prajapati
252113
this will not work in firefox, only in chrome
– Sanjeev Kumar
Aug 9 '16 at 12:21
It's just the link from the comment?
– Magesh Kumaar
Aug 9 '16 at 12:21
for firefox: -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
– Neeraj Prajapati
Aug 9 '16 at 12:39
add a comment |
2
2
2
Try it.
<div class="test"></div>
.test {
width: 500px;
height: 100px;
background-color: #ccc;
position: relative;
}
.test:before, .test:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
height: 10px;
background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-size: 80px;
}
.test:before {
top: 0px;
}
.test:after {
bottom: 0px;
}
See Demo
http://jsfiddle.net/yH59y/
answered Aug 9 '16 at 12:18
Neeraj PrajapatiNeeraj Prajapati
252113
Try it.
<div class="test"></div>
.test {
width: 500px;
height: 100px;
background-color: #ccc;
position: relative;
}
.test:before, .test:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
height: 10px;
background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
background-size: 80px;
}
.test:before {
top: 0px;
}
.test:after {
bottom: 0px;
}
See Demo
http://jsfiddle.net/yH59y/
answered Aug 9 '16 at 12:18
Neeraj PrajapatiNeeraj Prajapati
252113
answered Aug 9 '16 at 12:18
Neeraj PrajapatiNeeraj Prajapati
252113
answered Aug 9 '16 at 12:18
Neeraj PrajapatiNeeraj Prajapati
252113
answered Aug 9 '16 at 12:18
Neeraj PrajapatiNeeraj Prajapati
252113
252113
this will not work in firefox, only in chrome
– Sanjeev Kumar
Aug 9 '16 at 12:21
It's just the link from the comment?
– Magesh Kumaar
Aug 9 '16 at 12:21
for firefox: -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
– Neeraj Prajapati
Aug 9 '16 at 12:39
add a comment |
this will not work in firefox, only in chrome
– Sanjeev Kumar
Aug 9 '16 at 12:21
It's just the link from the comment?
– Magesh Kumaar
Aug 9 '16 at 12:21
for firefox: -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
– Neeraj Prajapati
Aug 9 '16 at 12:39
this will not work in firefox, only in chrome
– Sanjeev Kumar
Aug 9 '16 at 12:21
this will not work in firefox, only in chrome
– Sanjeev Kumar
Aug 9 '16 at 12:21
It's just the link from the comment?
– Magesh Kumaar
Aug 9 '16 at 12:21
It's just the link from the comment?
– Magesh Kumaar
Aug 9 '16 at 12:21
for firefox: -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
– Neeraj Prajapati
Aug 9 '16 at 12:39
for firefox: -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
– Neeraj Prajapati
Aug 9 '16 at 12:39
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38850419%2fhow-to-create-multi-color-border-in-css3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
jsfiddle.net/yH59y
– Roysh
Aug 9 '16 at 12:17
1
you can use a border image: w3schools.com/cssref/css3_pr_border-image.asp
– Andrew
Aug 9 '16 at 12:17
1
try this: hongkiat.com/blog/css-gradient-border
– Sanjeev Kumar
Aug 9 '16 at 12:17