<html>
<head>
<meta charset='utf-8'/>
<title>Simple Card with Emoji Border Design - RJM Programming - April, 2022 ... thanks to https://stackoverflow.com/questions/41199841/use-emoji-as-css-border</title>
<style>
.box {
width: 300px;
/* our SVG's width and height is 30px, so we need to keep the width and height multiple of 30 to avoid cutting */
height: 240px;
position: relative;
/* to center the text */
display: flex;
justify-content: center;
align-items: center;
}

.box:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'%3E🎄%3C/text%3E%3C/svg%3E");

--mask: linear-gradient(#000, #000) content-box,
linear-gradient(#000, #000);
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-composite: source-out;
padding: 30px;
}
</style>
<script type='text/javascript'>
var wasih='', isih='', dho='';

function newwin(divo) {
var wo=window.open('','_blank','left=10,top=10,width=' + eval(-20 + screen.width) + ',height=' + eval(-20 + screen.height));
if (dho != '') {
wo.document.write('<html>' + dho + '<body>' + divo.outerHTML + '</body></html>');
} else {
wo.document.write('<html>' + document.head.outerHTML + '<body>' + divo.outerHTML + '</body></html>');
}
}

function iframeit(tao) {
document.getElementById('toptable').style.opacity='0.0';
document.getElementById('ifp').src=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 19876564);
document.getElementById('ifp').style.display='block';
document.getElementById('ifp').style.position='absolute';
document.getElementById('ifp').style.top='0px';
document.getElementById('ifp').style.left='0px';
document.getElementById('ifp').style.width='100%';
document.getElementById('ifp').style.height='100vh';
document.getElementById('ifp').style.zIndex='99';
//document.getElementById('ifp').style.opacity='1.0';
}

function checkforparent() {
if (window.parent != window) {
dho=document.head.outerHTML.replace('<style' + document.head.outerHTML.split('<style')[1].split('</style>')[0] + '</style>', parent.document.getElementById('css').value);
document.getElementById('spares').innerHTML=parent.document.getElementById('css').value;
document.getElementById('css').value=parent.document.getElementById('css').value;
document.getElementById('words').value=parent.document.getElementById('words').value;
document.getElementById('box').innerHTML=parent.document.getElementById('box').innerHTML;
}
}
</script>
</head>
<body onload=" checkforparent(); ">
<table id=toptable border=12 cellpadding=3 cellspacing=3><tr><td style=vertical-align:top; title='Click to show card above in new window' onclick="newwin(document.getElementById('box'));" ondblclick="newwin(document.getElementById('box'));">
<div id=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='box' contenteditable=true onblur=" document.getElementById('words').value=(this.innerText || this.contentWindow || this.contentDocument); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=isih; } ">Hello</div><br>
</td><td style=vertical-align:top;text-align:center;><h1>Simple Card with Emoji Border Design</h1><h3>RJM Programming - April, 2022</h3><h4>Thanks to <a target=_blank title=https://stackoverflow.com/questions/41199841/use-emoji-as-css-border href='//stackoverflow.com/questions/41199841/use-emoji-as-css-border'>Use Emoji as CSS Border</a></h4>
</td><td style=vertical-align:top;>

<table border=18 style=background-color:yellow;>
<tr><th>Words</th><th> CSS</th></tr>
<tr><td style=vertical-align:top;><textarea id=words name=words rows=40 onblur=" isih=this.value; if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } } document.getElementById('box').innerHTML=isih; ">Hello</textarea></td>
<td style=vertical-align:top;><textarea id=css name=css cols=52 rows=40 onblur=" iframeit(this); " title='Can use, within that SVG defining the card border, an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control=space for iOS, top left + for Android keyboard).'><style>
.box {
width: 300px;
/* our SVG's width and height is 30px, so we need to keep the width and height multiple of 30 to avoid cutting */
height: 240px;
position: relative;
/* to center the text */
display: flex;
justify-content: center;
align-items: center;
}

.box:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'%3E🎄%3C/text%3E%3C/svg%3E");

--mask: linear-gradient(#000, #000) content-box,
linear-gradient(#000, #000);
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-composite: source-out;
padding: 30px;
}
</style>
</textarea></td></tr></table>

</td></tr></table>
<iframe name=ifp id=ifp style=display:none; src=''></iframe>
<div id=spares style=display:none;></div>
</body>
</html>