CSSで文字のまわりに縁取りをつける方法を紹介します。
「text-shadow」と「text-stroke」の2つの方法をまとめました。

text-shadowを使う

テキストの角の部分がかけてしまうので、ぼかしをいれたり数値を小さめにしておくとキレイに見えます。

DEMO

縁取りテキスト

HTML

<p class="text-outlined">縁取りテキスト</p>

CSS

stroke-dasharrayとstroke-dashoffsetの値は、パスの長さに合わせて調整します。

.text-outlined {
	color: #fff;
	font-size: 48px;
	text-shadow: -2px 0 2px #000, 2px 0 2px #000, 0 -2px 2px #000, 0 2px 2px #000;
}

text-strokeをつかう

10pxくらいの太めのストロークでもキレイに見えます。
こちらはぼかしを入れることはできません。

DEMO

縁取りテキスト

HTML

<p class="text-outlined2">縁取りテキスト</p>

CSS

paint-orderで重ね順を指定しています。

.text-outlined2 {
	color: #fff;
	font-size: 48px;
	paint-order: stroke fill;
	-webkit-text-stroke: 10px #000;
}