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(10);

$('borderStyle').addEvent('change', function(e) {

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

});