JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lavagna">With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>

CSS

@font-face {
    font-family: EraserFont;
    src: url(..font/erasdust.ttf);
}

div.lavagna {
  border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
    transform: rotate(180deg);
  display: block;
  width:200px;
  height:100px;
  font-family: EraserFont;
  background-color: black;
  border: 10px solid transparent;
      -webkit-border-image: url(http://65.media.tumblr.com/e36fd9918fe421828243a7b8662afcd0/tumblr_mg9owyPqkP1rirnzso1_400.jpg) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(http://65.media.tumblr.com/e36fd9918fe421828243a7b8662afcd0/tumblr_mg9owyPqkP1rirnzso1_400.jpg) 30 round; /* Opera 11-12.1 */
    border-image: url(http://65.media.tumblr.com/e36fd9918fe421828243a7b8662afcd0/tumblr_mg9owyPqkP1rirnzso1_400.jpg) 30 round;
  color: white;
  padding: 10px;
}