Unpacking CSS property values in JavaScript

When the style attribute is read, shortened CSS properties are 'unpacked' into their full properties. Let's see what is meant. Let us set the margin for all sides:

elem.style.margin = '20px';

Выведем его:

console.log(elem.style.margin); // shows '20px';

At the same time, reading properties for each side will also be available:

console.log(elem.style.marginLeft); // shows '20px';

Given a div:

<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
	text
</div>

There is also a button. By clicking on the button, display the border thickness, its type and color.