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">
  <head>
    <title> Test </title>
    <style>
       #title {
          color: blue;
          stroke: red;
          stroke-width: 2px;
       }
    </style>
  </head>

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

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.

Solution

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-size:2em;
  font-weight: bold;
}

<h1>Nonstandard -webkit-text-stroke</h1>
<svg>
  <text text-anchor="top" y="50%">SVG Element</text>
</svg>