JSFiddle - React, Tailwind, and code Playground

by Jesse Donat

HTML

<div id="thingholder"><div></div></div>

<select id="borderStyle">
    <option>solid</option>
    <option>double</option>
    <option>dotted</option>
    <option>dashed</option>
</select>

CSS

#thingholder div {
    width: 0px;
    height: 0px;
    border-style: solid;
    background: #0000ff;
    float: left;
    /*border-color: red maroon blue orange;*/
    border-color: #0000ff #0000cc #000099 #000066;
}

#thingholder {
    width: 400px;
    overflow: hidden;
}

JavaScript

/*
* Awesome JavaScript Border Thing by Jesse G. Donat <donatj at gmail.com>
*/

for(var i = 0; i < 99; i++){ 
    new Element('div').inject('thingholder');
}
var tdivs = $$('#thingholder div');
var j = 0;
(function(){
    j += 1.5;
    tdivs.each( function(el, i){
        var x = (Math.sin( (i + j ) / 10) * 20) + 20;
        var y = (Math.cos( (i + j) / 10) * 20) + 20;
        if( x > 40 ) alert( x );
        
        el.setStyles({
            borderLeftWidth: x,
            borderRightWidth: 40-x,
            borderTopWidth: y,
            borderBottomWidth: 40-y
        });
    } );
}).periodical(50);

$('borderStyle').addEvent('change', function(e){
    
    tdivs.each( function(el){
        el.setStyle( 'borderStyle', e.target.get('value') );
    });
    
});