text-stroke
Adds a stroke (outline) to text. Used for outline effects where text is transparent showing only the outline, or adding borders to text. Pattern: ts{size}{colorCode}.
Naming Convention
ts = text stroke abbreviation. Append size (with unit) and 6-digit HEX color.
| Pattern | Example | CSS |
|---|---|---|
| ts{크기}{HEX} | ts1pxFFFFFF | text-stroke: 1px #FFFFFF |
| ts{크기}{HEX} | ts2px6366F1 | text-stroke: 2px #6366F1 |
| ts{크기}{HEX} | ts3pxFF0000 | text-stroke: 3px #FF0000 |
Class Examples
| Class | CSS | Description |
|---|---|---|
ts1pxFFFFFF | text-stroke: 1px #FFFFFF | 1px white outline |
ts2pxFFFFFF | text-stroke: 2px #FFFFFF | 2px white outline |
ts1px000000 | text-stroke: 1px #000000 | 1px black outline |
ts2px6366F1 | text-stroke: 2px #6366F1 | 2px indigo outline |
ts3pxFF0000 | text-stroke: 3px #FF0000 | 3px red outline |
Visual Comparison
Text-stroke effects with various thicknesses and colors.
1px White Stroke
Atomic CSS
ts1pxFFFFFF ct2px Indigo Stroke
Atomic CSS
ts2px6366F1 ct1px Stroke + color retained
Atomic CSS
ts1pxFFFFFF cFAFAFA3px Red Stroke
Atomic CSS
ts3pxFF0000 ctOutline Text Pattern
Setting text color to transparent (ct = color: transparent) creates an outline-only effect.
<!-- Outline text (only outline visible) -->
<h1 class="fs6rem fw900 ts2pxFFFFFF ct">
Outline Text
</h1>
<!-- ct = color: transparent, makes text color transparent -->
<!-- ts2pxFFFFFF = text-stroke: 2px #FFFFFF -->Usage Examples
<!-- Hero title outline -->
<section class="df jcc aic h100vh bg000000">
<h1 class="fs8rem fw900 ts2pxFFFFFF ct">
ATOMIC CSS
</h1>
</section>
<!-- Add border to text (keep color) -->
<h2 class="fs4rem fw800 ts1px000000 cFFFFFF">
Stroke + Fill
</h2>
<!-- Colored outline -->
<p class="fs3-2rem fw700 ts1px6366F1 ct">
Indigo Outline
</p>Tips & Notes
ts abbreviation conflict
ts is also used for transform: scale(). ts1-5 = scale(1.5), ts1pxFFFFFF = text-stroke. With size+color, it's recognized as text-stroke.
Non-standard property
text-stroke is a WebKit extension, not W3C standard. Supported in all modern browsers but not official.
Key to outline effects
To show only the outline, always use with ct (color: transparent). With color present, stroke draws behind text appearing as bold.