JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

HTML

<div class="border style1">Style 1</div>
<div class="border style2">Style 2</div>
<div class="border style3">Style 3</div>
<div class="border style4">Style 4</div>
<div class="border style5">Style 5</div>
<div class="border style6">Style 6</div>

CSS

.border {
    display:inline;
    padding:3px;
}
.style2,.style3 { border:3px solid grey }

JavaScript

border($('.border.style1'),null);
$('.border.style2').html(border($('.border.style2')));
border($('.border.style3')," ");
border($('.border.style4'),{style:"solid",color:"#adadad",width:2});
border($('.border.style5'),"5px dashed #333333");
border($('.border.style6'),{style:"dotted",color:"#abcdef",width:10,radius:30});

function border(element,options, callbacks){
	if (typeof options === 'undefined') return element.css("border");

	return element.each(function(){
		if (options === null) return;
		else if (typeof options === "string"){
            if (options.trim() === "" ){
                element.css("border","none");
                return;
            }
			element.css("border", options);
			return;
		}
		else if (typeof options === "object"){
			element.css("border-style", (options.style||"solid"));
			element.css("border-width", (options.width||null)); 
			element.css("border-color", (options.color||null)); 
			element.css("border-radius", (options.radius||null));
		}
	});
}