How can I make my borders the same size?

Question

I'm making a piece of JavaScript that puts words in blocks depending on their size (see the demo below).

I use a span in order to contain each word. My problem is that the borders are really thick at some places and thin elsewhere. I can't seem to find how to make the borders collapse, any ideas of how I could to do that?

NOTE: I size the borders using "vw" units in order to have them proportional to the viewport size.

window.onload = function wordsinblocks(self) {
    
    var demos = document.getElementsByClassName("demo"),
        i = 0, len = demos.length,
        demo;

    for (; i < len; i++) {
        demo = demos[i];
        var initialText = demo.textContent,
            wordTags = initialText.split(" ").map(function(word) {
                return '<span class="word">' + word + '</span>';
            });

        demo.innerHTML = wordTags.join('');
    }

    self.disabled = true;
    fitWords();
    window.addEventListener('resize', fitWords);
}

function fitWords() {
    var demos = document.getElementsByClassName("demo"),
      sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100],
        j = 0, len = demos.length,
        demo, node,
        i, nodeWidth,
        match, index;
        
    for (; j < len; j++) {
    
        demo = demos[j];
        var width = demo.offsetWidth,
            calculated = sizes.map(function(size) {
                return width * size / 100
            });

        for (i = 0; i < demo.childNodes.length; i++) {
            node = demo.childNodes[i];
            node.classList.remove('size-1', 'size-2', 'size-3', 'size-4');

            nodeWidth = node.clientWidth;
            match = calculated.filter(function(grid) {
                return grid >= nodeWidth;
            })[0];
            index = calculated.indexOf(match);
            
            node.classList.add('size-' + (index + 1));
        }
    }
}

.demo {
    display: block;
    padding: 0 0 0 1px;
    overflow: auto;
}

.demo .word {
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2.9vw;
    height: 10%;
    font-family: "helvetica";
    border: 1vw solid black;
}

.demo .word:hover {
    background-color: blue;
    color: white;
}

.demo .size-1 {
    width: 7.69230769230769%;
}

.demo .size-2 {
    width: 23.07692307692307%;
}

.demo .size-3 {
    width: 46.15384615384614%;
}

.demo .size-4 {
    width: 100%
}

<p class="demo">Guy Debord est un écrivain, essayiste, cinéaste, poète1 et révolutionnaire français. Il se considère avant tout comme un stratège. C'est lui qui a conceptualisé la notion sociopolitique de « spectacle », développée dans son œuvre la plus connue, La Société du spectacle.</p>

Answer 1

You can accomplish this effect by using box-shadow along with a negative margin. I've also added some padding to the container so the edges aren't clipped.

Screenshot of the Result:

Live Demo:

window.onload = function wordsinblocks(self) {
    
    var demos = document.getElementsByClassName("demo"),
        i = 0, len = demos.length,
        demo;

    for (; i < len; i++) {
        demo = demos[i];
        var initialText = demo.textContent,
            wordTags = initialText.split(" ").map(function(word) {
                return '<span class="word">' + word + '</span>';
            });

        demo.innerHTML = wordTags.join('');
    }

    self.disabled = true;
    fitWords();
    window.addEventListener('resize', fitWords);
}

function fitWords() {
    var demos = document.getElementsByClassName("demo"),
      sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100],
        j = 0, len = demos.length,
        demo, node,
        i, nodeWidth,
        match, index;
        
    for (; j < len; j++) {
    
        demo = demos[j];
        var width = demo.offsetWidth,
            calculated = sizes.map(function(size) {
                return width * size / 100
            });

        for (i = 0; i < demo.childNodes.length; i++) {
            node = demo.childNodes[i];
            node.classList.remove('size-1', 'size-2', 'size-3', 'size-4');

            nodeWidth = node.clientWidth;
            match = calculated.filter(function(grid) {
                return grid >= nodeWidth;
            })[0];
            index = calculated.indexOf(match);
            
            node.classList.add('size-' + (index + 1));
        }
    }
}

.demo {
    display: block;
    padding: 1vw;
    overflow: auto;
}

.demo .word {
    float: left;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2.9vw;
    height: 10%;
    font-family: "helvetica";
    box-shadow: 0 0 0 1vw black;
    margin: 0.5vw;
}

.demo .word:hover {
    background-color: blue;
    color: white;
}

.demo .size-1 {
    width: 7.69230769230769%;
}

.demo .size-2 {
    width: 23.07692307692307%;
}

.demo .size-3 {
    width: 46.15384615384614%;
}

.demo .size-4 {
    width: 100%
}

<p class="demo">Guy Debord est un écrivain, essayiste, cinéaste, poète1 et révolutionnaire français. Il se considère avant tout comme un stratège. C'est lui qui a conceptualisé la notion sociopolitique de « spectacle », développée dans son œuvre la plus connue, La Société du spectacle.</p>

Answer 2

The borders are all the same it's just that there is no gap between the words so the border "doubles up". Try adding margin: 1px to .word