JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css">
<div id="curves" class="width">
    <div id="curve1"></div>
    <div id="curve2"></div>
    <div id="curve3"></div>
    <div id="curve4"></div>
    <div id="curve5"></div>
    <div id="curve6"></div>
    <div id="custom"></div>
</div>

<div id="controls">
    Width: <span></span> <div id="width"></div>
    Height: <span></span> <div id="height"></div>
    Top radius: <span></span> <div id="top"></div>
    Bottom radius: <span></span> <div id="bottom"></div>
    
    <input id="all" type="checkbox" /> <label for="all">Show all borders</label>
</div>

CSS

#curves div {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
}

#curves.width div {
    border-color: transparent transparent transparent #999;
}

#curves.color div {
    border-width: 0 0 0 1px;
}

#curves.all div {
    border-width: 1px;
    border-color: #ddd #ddd #ddd #999;
}

#curve1 {
    -moz-border-radius: 50px 0 0 50px;
    border-radius: 50px 0 0 50px;
}

#curve2 {
    -moz-border-radius: 0 0 0 90px;
    border-radius: 0 0 0 90px;
}

#curve3 {
    -moz-border-radius: 30px 0 0 70px;
    border-radius: 30px 0 0 70px;
}

#curve4 {
    width: 300px;
    -moz-border-radius: 50px 0 0 50px;
    border-radius: 50px 0 0 50px;
}

#curve5 {
    -moz-border-radius: 60px 0 0 0;
    border-radius: 60px 0 0 0;
}

#curve6 {
    -moz-border-radius: 100px 0 0 0;
    border-radius: 100px 0 0 0;
}

#custom {
    position: absolute;
    left: 200px;
    top: 20px;
}

#controls {
    position: absolute;
    left: 200px;
    top: 200px;
    width: 300px;
}

#controls div {
    font-size: 14px;
    margin: 3px 0 10px;
}

JavaScript

$('#curves').click(function(){
    $(this).toggleClass('color width');
});

var custom = $('#custom');

$('#controls div').slider({
    min: 0, 
    max: 300, 
    slide: function(evt, ui){
        var radius = $('#top').slider('value') + 'px 0 0 ' + $('#bottom').slider('value') + 'px';
        custom.css({
            width: $('#width').slider('value'), 
            height: $('#height').slider('value'), 
            borderRadius: radius, 
            MozBorderRadius: radius, 
            WebkitBorderRadius: radius
        });
        
        $(this).prev().text(ui.value + 'px');
    }
});

$('#width, #height').slider('option', 'value', 100);

$('#all').change(function(){
    $('#curves').toggleClass('all');
});