Hello
Simple Card with Emoji Border Design
RJM Programming - April, 2022
Thanks to
Use Emoji as CSS Border
Words
CSS
Hello
<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>