JSFiddle - React, Tailwind, and code Playground

by Valentin Radulescu

HTML

<div class="block bl1"></div>
<div class="block bl2"></div>
<div class="block bl3"></div>

CSS

.block {
    width: 50px;
    height: 50px;
    background-color:green;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    display: inline-block;
}

JavaScript

(function ($) {
    $.fn.border = function () {
        //if string ha been passed in
        if (typeof arguments[0] === 'string') {
            this.css('border', arguments[0]);
        //if object or null has been passed in
        } else if (typeof arguments[0] === 'object') {
            var settings;
            //if null then set settings to reset css styles
            if (arguments[0] === null) {
                settings = $.extend({
                    width: '',
                    color: '',
                    radius: '',
                    style: ''
                }, arguments[0]);
            //if not null then use passed in values
            } else {
                settings = $.extend({
                    width: arguments[0].width,
                    color: arguments[0].color,
                    radius: arguments[0].radius,
                    style: arguments[0].style || 'solid' //default to solid so border is visible
                }, arguments[0]);
            }
            //apply settings to object
            this.css({
                'border-width': settings.width,
                'border-color': settings.color,
                'border-radius': settings.radius,
                'border-style': settings.style,
            });
        } else {
            //if no or invalid argument then return border style
            return this[0].style.border;
        }
        //return object for chaining
        return this;
    };
})(jQuery);

$('.bl1').border('1px solid blue'); //set border for block 1
console.log($('.bl1').border()); //show border value

$('.bl2').border({ width: '2px', color: 'red', radius: '1px'}); //set border for block 2
console.log($('.bl2').border()); //show border value

$('.bl3').border({width: '2px', color: 'red', radius: '1px'}); //set border for block 2
$('.bl3').border(null); //clear border
console.log($('.bl3').border()); //show border value, border properties have been reset