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

Question

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.

@Bálint I'm new to HTML and CSS, and I'm not sure what that means. — Daniel Williams, Jul 13 '16 at 22:50
SVG is the an element to freate vector graphics with code. Stroke is an exclusive property for that — Bálint, Jul 13 '16 at 22:52

score 6 · Accepted Answer · answered Jul 13 '16 at 22:50

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>

Sorry, the post I was originally wanted the post this message at was deleted — Bálint, Jul 13 '16 at 22:54

score 0 · Answer 2 · answered Jul 13 '16 at 22:52

You are trying to apply an svg property "stroke" to an html tag. That's your issue.

You can convert your text to an svg object and then basically copy the effect from that code pen and it should work fine. SVG like this is pretty cross browser compliant as long as you're sticking to just the stroke and some keyframe animations.

The only concern would be you'd need to make something else your h1 tag for seo reasons.

I'm not going to create a working example since you already have one from the code pen.

score 0 · Answer 3 · answered Nov 03 '21 at 04:34

0

See if you want stroke so bad then first thing you wanna do is Remove google fonts because this doesn't have those features available yes but you can maybe try to download the font and install them to see if it does.

answered Nov 03 '21 at 04:34

user16693569

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 03 '21 at 10:52

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

3 Answers3