text outlines

<!--NOTE: -webkit-text-stroke overlap on cursive fonts. replace sans-serif with cursive and see for yourself.---->

<style>
* {
font: 2rem sans-serif;
font-weight: bold;
color: #fff;
}

 /*****SINGLE OUTLINE******/

.style1 {
-webkit-text-stroke: 1px #000;
}

.style2 {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.style3 {
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
}


/*****MULTIPLE OUTLINES******/

.style4 {
filter: drop-shadow(1px 1px 0 #EDB5C2) drop-shadow(-1px 1px 0 #EDB5C2) drop-shadow(0 -1px 0 #EDB5C2) drop-shadow(1px 0 #EDB5C2) drop-shadow( 0 3px white) drop-shadow( 3px 0 white) drop-shadow( 0 -3px white) drop-shadow( -3px 0 white) drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
}

.style5 {
-webkit-text-stroke: 1px #000;
text-shadow: -2px -2px 0 pink, 2px -2px 0 pink, -2px 2px 0 pink, 2px 2px 0 pink;
filter: drop-shadow(0px 1px #000) drop-shadow(0 -1px #000) drop-shadow(1px 0 #000) drop-shadow(-1px 0 #000);
}
</style>

<div class="style1">lorem ipsum</div>
<div class="style2">lorem ipsum</div>
<div class="style3">lorem ipsum</div>
<div class="style4">lorem ipsum</div>
<div class="style5">lorem ipsum</div>