Text with border/border around text in css

This article describes two options for decorating text with a border around the text along the path of the same text. There are, of course, more of these options. But I usually use the ones listed below.

Example 1, crappy: using the text-shadow property

text-shadow: 1px 0 0 red, -1px 0 0 red, 0 1px 0 red, 0 -1px 0 red, 1px 1px red, -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red;

I don’t like these inaccurate blurs in the corners of the letters, and I prefer to use the second option. But, if you choose a font with rounded corners (like Comfortaa), it will look fine.

Here is an option for a white frame, it looks pretty decent:

text-shadow: -1px -1px 0 #fff, 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 1px 1px 7px #ca7

Example 2: using webkit

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

Example 3: for SVG lovers

This solution is good because everything looks fine in older browsers and using a large font size. Here is the code:

<style>
.block {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }
</style>

<p class="block">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70"»Custom demo text«/text>
  </svg>
</p>