Я повторяю, я не представляю что за демонстратор вы хотите создать. Например, в моем понимании, это показать как величина значения будет влиять на конечный результат. Ну так значит нужно показать все возможное, а щелкая кнопкой показать все возможное, это не слишком удобно. Значит должно быть что-то типа:
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
table {
width: 100%;
}
td {
width: 20%;
padding: 10px;
}
pre {
padding: 30px 0 30px 40%;
border: 1px solid #777;
}
</style>
<script type="text/javascript">
$(function() {
$('input').on('input', function() {
var dms = $(':checked').val();
$(this).next().val(this.value);
var opt = $.map($('output'), function(e) {
return e.value + dms
}).join(' ');
$('pre').css('border-radius', opt).text(function() {
//только для примера, ибо квантификатор (?<=x)y не все браузеры поддерживают
return this.textContent.replace(/(?<=border-radius:\s)[^;]+/, opt)
})
});
});
</script>
</head>
<body>
<table>
<tr><td>Style/Value</td><td>top</td><td>right</td><td>bottom</td><td>left</td></tr>
<tr>
<td>border-radius <label><input type="radio" name="a" value="px" checked="" /> px</label> <label><input name="a" type="radio" value="%" /> %</label></td>
<td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
<td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
<td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
<td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
</tr>
<tr><td colspan="5"><pre>pre {
padding: 30px 0 30px 40%;
border: 1px solid #777;
border-radius: 0 0 0 0;
}</pre></td></tr>
</table>
</body>
</html>
Здесь можно и устанавливать значения для каждого угла, и выбирать единицы, и при этом влияние будет значительным. Можно сделать выбор единиц для каждого угла индивидуально, что так же будет иметь иной результат конечный. Кроме процентов и пикселей можно и другие единицы добавить. А вот что вы хотите и для чего, увы, я не знаю.
и 23(border-radius: 50px 0 0 50px
