CODEWITHSUNDEEP
htmlcssborder
OneEightLeft
OneEightLeft

Reputation: 324

multi colored border repeating possible with css?

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

Upvotes: 5

Views: 25365

Answers (8)

balapa
balapa

Reputation: 240

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.

Upvotes: 8

user3254486
user3254486

Reputation:

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 -->

Upvotes: 0

vals
vals

Reputation: 64164

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

Upvotes: 3

daGUY
daGUY

Reputation: 28743

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

Upvotes: 2

Adam
Adam

Reputation: 5236

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/

Upvotes: 4

SKeurentjes
SKeurentjes

Reputation: 1878

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/

Upvotes: 0

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

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.

Upvotes: 3

Related Questions