Daniel Williams Daniel Williams - 1 year ago 51
HTML Question

Why doesn't this simple HTML CSS text stroke work?

My ultimate goal is to make an effect like this: http://codepen.io/yoksel/pen/XJbzrO (bottom of page). But I can't even get this simple text outline to work.

<!DOCTYPE html>

<html lang = "en-US">
<title> Test </title>
#title {
color: blue;
stroke: red;
stroke-width: 2px;

<h1 id="title">This is some text</h1>

The solution must work across all major browsers. I'm using Google Chrome. If the stroke can't be done this way, please don't suggest using shadows. I can't turn shadows into the desired effect.

Answer Source

The stroke property exists in CSS, but it only works on SVG elements. There's a -webkit-text-stroke property that can be applied to regular text elements, but it's nonstandard and doesn't work on Internet Explorer.

To get the effect you're looking for, you have 2 options: Use the nonstandard property or wrap your text in an SVG element.

h1 {
  color: blue;
  -webkit-text-stroke: 2px red;
text {
  fill: blue;
  stroke: red;
  stroke-width: 2px;
  font-weight: bold;
<h1>Nonstandard -webkit-text-stroke</h1>
  <text text-anchor="top" y="50%">SVG Element</text>