.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; } "; if (isset($_POST['css'])) { $cssstyle=str_replace("\n + ","\n",str_replace("\n + ","\n",str_replace("\n + ","\n",str_replace(" "," + ",str_replace("svg xml,","svg+xml,",str_replace("+"," ",urldecode($_POST['css']))))))); } else if (isset($_GET['css'])) { $cssstyle=str_replace("\n + ","\n",str_replace("\n + ","\n",str_replace("\n + ","\n",str_replace(" "," + ",str_replace("svg xml,","svg+xml,",str_replace("+"," ",urldecode($_GET['css']))))))); } if (isset($_POST['words'])) { $words=str_replace("\n + ","\n",str_replace("\n + ","\n",str_replace("\n + ","\n",str_replace(" "," + ",str_replace("svg xml,","svg+xml,",str_replace("+"," ",urldecode($_POST['words']))))))); } else if (isset($_GET['words'])) { $words=str_replace("\n + ","\n",str_replace("\n + ","\n",str_replace("\n + ","\n",str_replace(" "," + ",str_replace("svg xml,","svg+xml,",str_replace("+"," ",urldecode($_GET['words']))))))); } echo " Simple Card with Emoji Border Design - RJM Programming - April, 2022 ... thanks to https://stackoverflow.com/questions/41199841/use-emoji-as-css-border " . $cssstyle . "

'); } this.innerHTML=isih; } \">" . str_replace("\n", "
", $words) . "

Simple Card with Emoji Border Design

RJM Programming - April, 2022

Thanks to Use Emoji as CSS Border

"; ?>