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.sstatic.net/baEaT.png") 33 repeat;
  -webkit-border-image: url("https://i.sstatic.net/baEaT.png") 33 repeat;
  -o-border-image: url("https://i.sstatic.net/baEaT.png") 33 repeat;
  border-image: url("https://i.sstatic.net/baEaT.png") 33 repeat;
}

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