multi colored border repeating possible with css?

Question

I've searched and can only find multiple border issues. I need to make one border with 4 colors that repeat.

<div id="wrapper" style="width:100%; background:#ccc; border-top: thick solid blue; border-bottom: thick solid blue; padding:10px;">
<div id="content">
This is some content.
</div>
</div>

http://jsfiddle.net/f7JT7/

I did everything inline so it's easier to understand

I'd like the border-top and bottom to be 4 different colors repeating.

1 2 3 4 1 2 3 4 1 2 3 4

Is this possible with css? I know i could do something like

<div>
<div id="red" style="width:50px;"></div><div id="green" style="margin-left:50px; width:50px;"></div><div id="purple" style="margin-left:100px; width:50px;"></div>
</div>

But i'd like to see if there is a better way of doing this with css? THanks.

This is the border i'm looking for

This is a screen shot of my design

look at this post: http://stackoverflow.com/questions/2717127/css3-gradient-borders — goldieJ, Oct 10 '13 at 14:54
I think second one is only better way..http://jsfiddle.net/f7JT7/2/ — Nikhil N, Oct 10 '13 at 15:10
it can be done using `border-image: -webkit-linear-gradient(left, #E18728, #BE4C39 33%, #9351A6 66%, #4472B9,#4CA454,#D49B00) 2%; border-image: -ms-linear-gradient(left, #E18728, #BE4C39 33%, #9351A6 66%, #4472B9,#4CA454,#D49B00) 2%; border-image: -moz-linear-gradient(left, #E18728, #BE4C39 33%, #9351A6 66%, #4472B9,#4CA454,#D49B00) 2%;` — NullPoiиteя, Jan 07 '15 at 05:40

score 8 · Answer 1 · edited Sep 20 '18 at 14:11

8

Actually, you can use pure CSS for this. You just need list item, then display to inline block, and add every list a different color.

edited Sep 20 '18 at 14:11

Samuel Liew

76,741
107
159
260

answered Feb 16 '14 at 11:27

balapa

240
2
8

This was a wonderful example that you showed! Thank you! Using nth-classes is a brilliant idea. – Sankalp Singha Jun 21 '15 at 14:41
12

The link that you have provided no longer works. Could you update the link or paste your code here. – iamktothed Jan 22 '16 at 04:53

score 4 · Answer 2 · answered Oct 10 '13 at 15:11

I created a CodePen example showing one way of doing this with CSS border-image. It's fairly well supported and does what you are looking for with CSS.

HTML:

<div class="fancy-border">
  my content
</div>

CSS:

.fancy-border {
  border: 4px solid;
  border-image: url("http://s12.postimg.org/kebji5qfd/border.png") 1 stretch repeat;
}

Chris Coyier has a nice post at CSS Tricks about border-image. http://css-tricks.com/understanding-border-image/

score 3 · Answer 3 · answered Oct 10 '13 at 14:53

3

No need for wrappers, multiple 'borders' are possible by using box-shadow

Codepen Example

#content {
  width:100px;
  height:100px;
  margin:25px;
  box-shadow:
  0 0 0 2px green,
  0 0 0 4px white, 
  0 0 0 6px blue,
  0 0 0 8px orange,
  0 0 0 10px green,
  0 0 0 12px red,
  0 0 0 14px blue;
  0 0 0 16px black;
}

I'm sure you could tweak to adjust.

answered Oct 10 '13 at 14:53

Paulie_D

107,962
13
142
161

2

i'm looking for horizonal, i've added an image to help – OneEightLeft Oct 10 '13 at 15:03
how to make horizontal dotted multi color – Mr Coder Sep 22 '20 at 05:05

score 3 · Answer 4 · answered Oct 10 '13 at 18:03

The future way of doing that would be border-image, as said in other answers.

An alternative in more short term would be using pseudo-elements, with gradients:

CSS

.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;
}

demo

score 2 · Answer 5 · answered Oct 10 '13 at 15:23

Instead of border-color, you could use border-image combined with CSS3 gradients to achieve an effect like that.

For example, here's a box with a border that fades between red, blue, yellow, and green horizontally: http://jsfiddle.net/8d6dt/

div {
    border-image: -webkit-linear-gradient(left, red, blue 33%, yellow 66%, green) 1%;
    border-width: 20px;
    height: 200px;
    width: 200px;
}

score 0 · Answer 6 · answered Oct 10 '13 at 14:55

0

You can use box-shadow but its not fully supported

http://jsfiddle.net/f7JT7/1/

box-shadow: 
  0  -5px 0 red,    0  5px 0 red,  
  0 -10px 0 yellow, 0 10px 0 yellow,
  0 -15px 0 green,  0 15px 0 green,
  0 -20px 0 purple, 0 20px 0 purple;

http://caniuse.com/css-boxshadow

answered Oct 10 '13 at 14:55

rafaelcastrocouto

11,781
3
38
63

i'm looking for horizontal, added an image to help – OneEightLeft Oct 10 '13 at 15:04

score 0 · Answer 7 · answered Oct 10 '13 at 14:56

0

U could use multiple box-shadows.

    #wrapper {
        box-shadow: 0 0 0px 5px purple, 
        0px 0px 0px 10px goldenrod, 
        0px 0px 0px 15px blue, 
        0px 0px 0px 20px orange;
    }

Example: http://jsfiddle.net/f7JT7/

answered Oct 10 '13 at 14:56

SKeurentjes

1,848
12
18

So the borders need to go horizontal not vertical so 1 2 3 4 – OneEightLeft Oct 10 '13 at 15:01
I've added an image to help – OneEightLeft Oct 10 '13 at 15:03

score 0 · Answer 8 · answered Jan 30 '14 at 18:18

I might have a solution for your problem. This solution is for a div with a border with 4 colors. It involves using :before and :after.

CSS

.test { /* this is our div with multiple borders */
    position: relative;
    width: [some width];
    background: [some color, image, ...];
    min-height: 4px;
}

Now, as you might have seen, we've set the position to relative. The thing is, this div is going to serve as a parent for another div that will stick to the bottom of it's parent:

.stickToBottom {
    position: absolute;
    bottom: 0;
    top: 100%;
}

"Why did we make this div?", you might wonder. Well, as said before, we are going to work with :before and :after in order to get a border with 4 colors. It would be impossible to do it without this div.

.test:after, .test:before, .stickToBottom:before, .stickToBottom:after {
    content: "";
    float: right;
    height: 4px;
}

.stickToBottom:before, [dir="ltr"] .stickToBottom:after {
    float: left;
    border-left: 35px solid black;
    border-width: 125px;
    border-right: 34px solid green;
    border-width: 125px;
}

.test:after, [dir="rtl"] .test:before {
    border-left: 35px solid yellow;
    border-width: 125px;
    border-right: 34px solid purple;
    border-width: 125px;
}

And here is why: if we didn't include the stickToBottom div, and we were to say this:

.test:before, [dir="ltr"] .test:after {
    float: left;
    border-left: 35px solid black;
    border-width: 125px;
    border-right: 34px solid green;
    border-width: 125px;
}

.test:after, [dir="rtl"] .test:before {
    border-left: 35px solid yellow;
    border-width: 125px;
    border-right: 34px solid purple;
    border-width: 125px;
}

the black and green borders would be located at the top of the div, while the yellow and the purple borders would be located at the bottom of the div, and there would be no way to fix this. By adding the stickToBottom div, we can achieve what you want: all borders will be located at the bottom.

HTML

<div class="test">
    <p>test</p>
    <div class="bottom"></div>
</div><!-- /test -->

multi colored border repeating possible with css?

8 Answers8

demo

Linked