Daniel Williams Daniel Williams - 4 months ago 18
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">
<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.

Answer

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>

Comments