Use Emoji as CSS Border

Question

I am looking for a way to use an emoji as a border for a HTML newsletter. Pretty much, I want the Christmas tree emoji () to repeat around a div. Any ideas on how to do that?

Answer 1

Generally, one way would be to use the border-image property, which requires you to use a picture and not a character. As pointed out in the comments, unfortunately this is not well supported in emails.

.christmas {
  display: inline-block;
  padding: 15px;
  border: 33px solid transparent;
  -moz-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat;
  -webkit-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat;
  -o-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat;
  border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat;
}

<div class="christmas">
  Merry Christmas!
</div>

Answer 2

As you will use it for mail, a table will be the solution for you, like this

<table style="width: 478px;height: 285px;">
  <tr>
    <td colspan="3" style="height:30px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-x"></td>
  </tr>
  <tr>
    <td style="width:26px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-y"></td>
    <td valign="top" style="padding: 20px;">

      Content
      
    </td>
    <td style="width:26px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-y;"></td>
  </tr>
  <tr>
    <td colspan="3" style="height:30px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-x"></td>
  </tr>
</table>

Answer 3

Here is an idea with SVG text and masking. No PNG

.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: destination-out;
          mask-composite: exclude;
  padding: 30px;
}

<div class="box">
  Hello
</div>

The SVG that I use

<svg height="30" width="30">
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"></text>
</svg>

I encoded it with svg-encoder

You can insert any kind of emoji:

.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: destination-out;
          mask-composite: exclude;
  padding: 30px;
}

<div class="box">
  Hello
</div>