CSSにて文字列を縁取りする方法は2種類存在しており、一つはCSS3の「text-stroke」を用いるパターン、もう一つは「text-shadow」を用いるパターンである。

■text-stroke

.outline {
	-webkit-text-stroke-color: #777;
	-webkit-text-stroke-width: 1px;
}

※省略系で書くと下記の通り。

.outline {
	-webkit-text-stroke: 1px #777;
}

■text-shadow

.outline {
	text-shadow:
		-1px -1px #777,
		1px -1px #777,
		-1px 1px #777,
		1px 1px #777;
}

「text-stroke」は内側に縁取りされ、「text-shadow」は外側に縁取りされる。
また、「text-stroke」を用いると、今現在はwebkit系のブラウザでしか解釈してくれないので注意。
「text-shadow」であればほとんどのブラウザに対応している一方、セリフ体のフォントだと縁と縁の合間に隙間が生まれるため、若干美しさに欠ける。といっても気にならない人であれば全く問題ない。