Dividing border in sections?

Question

Is there a way to divide a border in sections in CSS? So in this fiddle I have a border. But instead of having one solid color, how can I have it so that then its like this, but the width would be set with JS. So choose say 3 colors. Then JS would get the width which would be 33%, then CSS would set the color to each one. Ideas?

So something like

top{
border-top: 4px solid blue;
}

Then change the width and have more then one color

Answer 1

1. create as many 'span' elements as sections
2. set width of each 'span' based on number of sections
3. set random background color to each section
4. Add them to target div

HTML:

<div id="box"></div>

CSS:

#box {
  background-color: black;
  margin: 15px;
  position: relative;
  width: 90%;
  height: 40px;
  padding: 0;
}
.border_section{
  height: 4px;
  display: block;
  float: left;
}

JavaScript:

var sections = Math.ceil(Math.random()*20);
var target_div = document.getElementById('box');
var target_width = target_div.offsetWidth;
var sec_width = Math.ceil(target_width/sections);
for(i=0;i<sections;i++){
  if(i == sections-1){
    sec_width = target_width - ((sections-1)*sec_width)-1;
  }
  var borderSection=document.createElement("span");
  borderSection.className = "border_section";
  borderSection.style.backgroundColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
  borderSection.style.width = sec_width+'px';
  target_div.appendChild(borderSection);
}

DEMO

Answer 2

Check out this article. They recommend doing it a similar way to your HR but using pseudo elements instead http://www.sitepoint.com/rainbow-border-with-sass/.

It is possible to do with border-image but it has limited support (http://caniuse.com/border-image) If you're interested in this approach check out this code pen - http://codepen.io/samarkandiy/pen/lvrBn

Here is something I worked up to show you how it could work - http://jsfiddle.net/29gPg/

.border {
    background-color: black;
    background-size: 50px 50px;
    display: inline;
    float: left;
    margin: 15px;
    position: relative;
    border-width: 20px;
    width: 160px;
    height: 160px;
}

.border {
    border-image: linear-gradient(90deg,   
        #9b59b6 0%, 
        #9b59b6 25%, 
        #34495e 25%, 
        #34495e 50%, 
        #f1c40f 50%, 
        #f1c40f 75%, 
        #e67e22 75%
    ) 2%;
    border-top-width: 10px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
}

One last thought, if you plan on using CSS to modify this border on-the-fly the CSS will have to be in-line or else you'll have to pre-make a bunch of CSS gradient border images and then apply them via class name.

Edit — this uses border-image but only works in WebKit (maybe ie11 but not tested)

This question peaked my interest, so I went further with the JSFiddle demo. http://jsfiddle.net/K2FEm/5/

Edit 2

Ok, so it would seem that border-image isn't supported by FF at all or at least not using gradients as illustrated here - http://css-tricks.com/examples/GradientBorder/ .

However there is a trick you can use which would be to use the same gradient (this time with the proper browser prefix) as a background image and position it correctly. You can see the results in this fiddle below, if you want to set the various colors you'll either have to write a script in JS/JQuery to dynamically build the gradients and then apply them to the elements in-line, or do as I have and make pre-determined classes that can then be applied at will (this is generally the preferred method for speed and memory reasons but you may want to go with the first option for flexibility's sake).

I built my first gradient manually and then got all of the browser prefixes with - http://www.colorzilla.com/gradient-editor/ (This is a great tool I use all the time.)

DEMO

Answer 3

No, I don't believe that there is - that is to say, I'm not aware of a means by which a single element can have the border width of one of its sides vary in width. But why not simply use multiple elements?

The idea is to stack a bunch of divs horizontally, then simply target the ones you wish to have a different width.

This solution will simply make the hovered div have a border that's 10px thick. Do note, the absence of white-space between the divs (they're all on one line) - whitespace between them will cause the colour-line to have gaps in it.

You'll see that I've use a class common to each of the divs (border). I've used another one to dictate the colour, and yet another one to dictate the default thickness.

Finally, I've divided the screen width (100%) by the number of divs I have (4). Since you've got 8 different colours, you'd want to set the width to 12.5%, rather than 25%.

<!DOCTYPE html>
<html>
<head>
<style>
.border
{
    border-top: solid 5px transparent;
    width: 25%;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}
.border:hover
{
    border-top-width: 10px;
}
.thick
{
    border-top-width: 7px;
}
.thin
{
    border-top-width: 3px;
}
.red
{
    border-color: red;
}
.blue
{
    border-color: blue;
}
.yellow
{
    border-color: yellow;
}
.green
{
    border-color: green;
}
</style>
</head>
<body>
    <div class='border red thick'></div><div class='border blue thin'></div><div class='border green'></div><div class='border yellow'></div>
</body>
</html>

Answer 4

Hello there are three possible solution's the one I like and use in my project is using a color stripe. and using css i just "repeat-x". It work like charm

The second solution is using CSS3 Gradients, but i do not recommend this way due to Cross Browser Compatibility issue specially IE.

Third Solution is using this color stripe as Border-Image, but remember this may have issue with older browsers.

I recommend solution one, but at the end choice is your's. Good Luck