-1

Is it possible to easily outline text with html/css? I don't mean putting a shadow behind it with text-shadow property but outlining the text with strokes.

Hanzilka
  • 7
  • 4
  • 1
    check this it will help https://stackoverflow.com/questions/64508701/how-can-i-place-a-div-directly-over-another-div-that-contains-content-with-a-s/64508943#64508943 – Chamsddine Bouzaine Jan 09 '21 at 21:59
  • 1
    It seems a lot of people have tried adding an outline to text, This [question](https://stackoverflow.com/questions/4919076/outline-effect-to-text) has a lot of different approaches. For what it's worth, pure css outlines are well supported on modern browsers, if you have no need for SVG, I would stick to a css solution. – Lars Jan 09 '21 at 22:03
  • @Lars ah, I used that topic as an inspiration since there wasn't a really satisfying information, but I guess that Ï'll just go with the text-shadow... – Hanzilka Jan 09 '21 at 22:13

1 Answers1

1

.stroke {
  -webkit-text-stroke: 2px limegreen;
  color: transparent;
}

.stroke-explicit {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: red;
  color: transparent;
}

h1 {
  font-size: 60px;
}
<h1 class="stroke">Shorthand</h1>
<h1 class="stroke-explicit">Both properties</h1>
Andris Jefimovs
  • 689
  • 6
  • 17