css

p {
  font-size: 64px;
}

.css {
  color: #fff;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke;
}

.svg-dilate {
  filter: url("#filter-dilate");
}

.svg-erode {
  filter: url("#filter-erode");
}

.for-stroke {
  /* display:noneではFirefoxで動かないので対策する */
  position: absolute;
  visibility: hidden;
}

html

<p class="css">CSSで縁取り文字</p>
<p class="svg-dilate">縁取り文字 Dilate</p>
<p class="svg-erode">縁取り文字 Erode</p>

<svg class="for-stroke">
  <filter id="filter-dilate">
    <feMorphology operator="dilate" radius="1" result="DILATED" />
    <feComposite in="DILATED" in2="SourceGraphic" operator="out" />
  </filter>
  <filter id="filter-erode">
    <feMorphology operator="erode" radius="1" result="ERODED" />
    <feComposite in="ERODED" in2="SourceGraphic" operator="xor" />
  </filter>
</svg>