[Malleys]

ясно, я просто не могу правильно сформулировать

Я понял, вас. Я не знаю, почему вам именно так надо.

Посмотрите такой вариант с вашими значениями длин радиусов углов...

<style>
input, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	font: inherit;
	box-sizing: content-box;
	min-width: 1em;
}
input:focus, select:focus {
	border: 1px solid silver;
	background: white;
}
body {
	text-align: center;
}
#code {
	font: 144% monospace;
	padding: 1em;
	margin: 2em 0;
	text-align: left;
	display: inline-block;
	background: blanchedalmond;
}
#code label {
	display: block;
	color: slategray;
}
#code label:after {
	content: ";";
}
#test {
	margin: auto;
	background: red;
	background: #f0f0f0;
	border: 1px solid #999;
}
</style>

<div id="test"></div>

<section id="code">
	<label>
		border-radius:
		<select id="border-radius" value="10% / 30px">
			<option>50px 0 0 50px</option>
			<option>40px 10px</option>
			<option>13em / 3em</option>
			<option>13em 0.5em / 1em 0.5em</option>
			<option>8px</option>
		</select></label>
	<label>
		width:
		<input id="width" value="420px"></label>
	<label>
		height:
		<input id="height" value="100px"></label>
</section>

<p><strong>Совет:</strong> Нажмите на значение CSS, чтобы изменить его.</p>

<script>
	Array.prototype.forEach.call(document.querySelectorAll("input, select"), function(element) {
		(element.oninput = element.onchange = function() {
			element.style.width = element.value.length + "ch";
			document.getElementById("test").style[element.id] = element.value;
		})();
	});
</script>