JSFiddle - React, Tailwind, and code Playground

by ericwilligers

HTML

<div id="report"></div>
<div id="target"></div>

JavaScript

target.style['border-image'] = 'url("https://example.com/") 1% 2% 3% 4% fill / 5px 6px 7px 8px / 9px 10px 11px 12px round space';
properties = [
	'border-image-source',
	'border-image-slice',
	'border-image-width',
	'border-image-outset',
	'border-image-repeat',
	'border-image'
];

for (let property of properties) {
	let p = document.createElement('p');
	p.textContent = property + ' is \'' + target.style[property] + '\' ; \'' + getComputedStyle(target)[property] + '\'';
  report.appendChild(p);
}