<div id="box"></div>

<pre>
wavy edges with text decoration 
</pre>

<p hidden>🍿 Your browser doesn't support <code>text-decoration-thickness</code>, so you can't see the demo. </p>

div::before, div::after{
	display: block; content: '\00a0'; 
	position: absolute;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: black;
	text-decoration-thickness: 3px;
	word-spacing: 352px; line-height: 0;
	}
div::after {top: 0; right: -9px; writing-mode: vertical-lr; }
div::before{ bottom: 8px; }
div{
	height: 350px; width: 350px; position: relative;
	background:  center/100% no-repeat url("https://images.unsplash.com/photo-1541643600914-78b084683601?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") ;
}
body {  margin: 0; color: white; font: 13pt 'crimson text' ;  }
html{ background-color: black; }
pre {
	padding-left: 10px; margin-left: 10px;
	border-left: 3px orange solid; font: 16pt 'crimson text';
}

/* for Firefox */
@supports (-moz-user-select: none){
	div::before, div::after {text-decoration-thickness: 4px;}
	div::after { right: -24px;}
	div::before{ bottom: 12px; }
}

/* Fallback when text-decoration-thickness is not supported */
@supports not (text-decoration-thickness: 3px){
	div, pre {display: none; }
	p { 
		display: block; margin: auto; margin-top: 45vh; padding: 10px; width: max-content; 
		background: gold; color: black; 
	}
	code {font-size: 11pt;}
}