Is It Possible To Make A Border Around A Box That Is Made Of Words Or Text?

I made something on photoshop so people can understand what I'm picturing in my head. look at the border around the number 12 in this calendar

Solution 1:

Here is an idea using SVG as background with some rotation and scale. You can easily change the text, font, colors, etc. but you need then to adjust different values like padding, background-size, background-position, etc

.box {
  padding: 10px;
  margin:10px;
  font-size: 50px;
  display: inline-block;
  background-image: 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>"), 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45' style='transform:scale(-1,-1);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>");
  background-repeat:repeat-x;
  background-size:45px10px;
  background-position:top left,bottom left;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  left: 0;
  background-image: 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45' style='transform:rotate(90deg);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>"), 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='205012' height='10' width='45' style='transform:rotate(90deg) scale(-1,-1);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>");
  background-repeat:repeat-y;
  background-size:45px45px;
  background-position:calc(100% + 18px) 0,-18px0;
}

<divclass="box">
  16
</div><divclass="box">
  31
</div><divclass="box">
  16/07/2018
</div><divclass="box">
  16 Jul 2018
</div>

Solution 2:

Like this? You can simply use a Photoshop image that is png and has a transparent background but with the design you want, use css to attach a background: url("Image Src") to a custom class and then run a JavaScript code to check the date and then attach it to your calendar design. You need to play with the css to match your calendar date positions and size.

.date {
  font-size:100px;
  padding-left:10px;
}

.active-date {
  background: url("https://image.ibb.co/ipQRid/date_bk.png");
  background-repeat: no-repeat;
  background-size:contain;
}

<divclass="date active-date">12</date>