CSS 데모: -webkit-text-stroke 데모 버튼을 클릭해 보세요!
selector {
    -webkit-text-stroke: <'-webkit-text-stroke-width'> || <'-webkit-text-stroke-color'>;
    /*
        이 값은
        -webkit-text-stroke-width,
        -webkit-text-stroke-color 속성의 값입니다.
        지정하는 속성 값의 순서는 상관없습니다.
        지정하지 않은(생략한) 속성의 값은 초깃값이 적용됩니다.
    */
}
/* width | color */
-webkit-text-stroke: 3px magento;
-webkit-text-stroke: thin magento;
-webkit-text-stroke: medium magento;
-webkit-text-stroke: thick magento;

/* color | width */
-webkit-text-stroke: magento 3px;
-webkit-text-stroke: rgba(0, 0, 0, 0.6) 3px;

/* width: % 단위 적용 불가 */
-webkit-text-stroke: 5% magento;

/* 글로벌 값 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px red;
    }
</style>
<p class="text">텍스트</p>
실제 적용된 모습
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: #fff;
        -webkit-text-stroke: 1px red;
        text-shadow: 1px 4px red;
    }
</style>
<p class="text">텍스트</p>
실제 적용된 모습
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: #fff;
        -webkit-text-stroke: 5px transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: linear-gradient(to bottom, red, blue);
    }
</style>
<p class="text">텍스트</p>
실제 적용된 모습

caniuse.com에서 더 자세한 정보를 확인해 보세요.