# Font Stroke Issue **URL:** \ **Category:** Maker\ **Created:** [September 15, 2023, 4:04pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224 "2023-09-15T16:04:40Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![NP209](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/np209/32/80704_2.png) [@NP209](https://forum.inductiveautomation.com/u/NP209)\ **Post date:** [September 15, 2023, 4:04pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/1 "2023-09-15T16:04:41Z")
Hello everyone! I'm new and have been banging my head against this issue. I'm wanting to put a stroke around text on a label and cannot figure out how to do something like this and I cannot find any documentation on it. Has anyone done anything like this or know of a way to do it? ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [September 15, 2023, 4:29pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/2 "2023-09-15T16:29:54Z")
What is "a stroke"? Are you asking how to set a border on a Perspective label component? If so, - Select the label. - On the Perspective Property Editor click the PROPS.style 'Modify Style' icon. You'll find the border properties in there. A better way to do this is to create a new style on the Project Browser and then apply that style using the Classes dropdown on the component. That way you can ensure consistent look and feel across all labels and one edit on the style will update them all. ---
**Author:** ![NP209](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/np209/32/80704_2.png) [@NP209](https://forum.inductiveautomation.com/u/NP209)\ **Post date:** [September 15, 2023, 4:57pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/3 "2023-09-15T16:57:35Z")
A stroke is a black border around something. In my case I want to add a black stroke around a white font. I have a situation where I have a label with white text that changes background color based on percent values. I want to add a black border around the text font so its easier to read when the background turns yellow with the white text. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [September 15, 2023, 6:49pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/4 "2023-09-15T18:49:37Z")
Wouldn't it be easier to change the font color? If the background is white change the font color to black. I don't think font in a label has a stroke and fill property, I think it's one property, color. But perhaps possible with some CSS whackery. Maybe this, [Adding Stroke to Web Text | CSS-Tricks - CSS-Tricks](https://css-tricks.com/adding-stroke-to-web-text/) Edit, tried this and it works: ```auto .psc-font-test { color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; } ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c0e44128613f36b7feb8a9f5823d8541821a8279.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [September 15, 2023, 7:51pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/5 "2023-09-15T19:51:37Z")
OK. You are talking about font **stroke** and **fill**. I don't think that's supported. See [How To Add Text Outline With CSS - Kinsta®](https://kinsta.com/blog/css-text-outline/#:~:text=Using%20the%20text%2Dstroke%20Property,add%20the%20%2Dwebkit%2D%20prefix). for details on this but I Designer seems to reject the Webkit style instructions. A simple solution is to use textShadow. Try the adding the following to the label's style properties: `textShadow : black 0px 0px 4px` ![Shadow](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/0278a5924130a05e67e6d5beb9a13a3dc3af2f4f.png) [https://docs.inductiveautomation.com/display/DOC81/Style+Reference#StyleReference-TextMenu](https://docs.inductiveautomation.com/display/DOC81/Style+Reference#StyleReference-TextMenu) ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [September 20, 2023, 12:48pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/6 "2023-09-20T12:48:27Z")
Text shadow is how I would do it too ---
**Author:** ![NP209](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/np209/32/80704_2.png) [@NP209](https://forum.inductiveautomation.com/u/NP209)\ **Post date:** [September 22, 2023, 2:33pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/7 "2023-09-22T14:33:31Z")
Sorry for the delay, been meaning to reply back to this, but had other things I needed to figure out first. I originally thought to do the same thing with the shadow feature but I can't get it to work. Whenever I try to get the shadow function to work nothing happens. It seems pretty straight forward lol, not sure what I'm messing up. ![shadow01](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/3314ba44c6e023c5d030ed40f17158e8f9a98189.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [September 22, 2023, 5:26pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/8 "2023-09-22T17:26:17Z")
> [@Transistor](#): > > Try the adding the following to the label's **style** properties: > `textShadow : black 0px 0px 4px` You've added it to the label's **textStyle** property. ---
**Author:** ![NP209](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/np209/32/80704_2.png) [@NP209](https://forum.inductiveautomation.com/u/NP209)\ **Post date:** [September 25, 2023, 2:06pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/9 "2023-09-25T14:06:25Z")
![updated](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e19d88da741f7881d49ea5a505757c389bb577c4.png) I have tried adding it to everything I can think of lol. But the results are the same, even when I add it to the label's style properties. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [September 25, 2023, 2:18pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/10 "2023-09-25T14:18:17Z")
`textShadow : #000000 0 0 4` is not the same as my suggested `textShadow : black 0px 0px 4px` ---
**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\ **Post date:** [September 25, 2023, 7:24pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/11 "2023-09-25T19:24:05Z")
Specifically, the `px` is non-negotiable. You can specify colors by hex but if you leave off the `px` it will refuse to set the shadow. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/5384d420e8475862f66ee81f5e53a6066a9f49af.png) EDIT: playing around with it some more and it's ~~that last value in particular, the shadow width,~~ any non-zero value that absolutely has to have a `px` or other unit specified: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/e/2e18b2de5a3ae1e34bf123ab7f72da2f45286efb.png) ---
**Author:** ![NP209](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/np209/32/80704_2.png) [@NP209](https://forum.inductiveautomation.com/u/NP209)\ **Post date:** [September 26, 2023, 2:11pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/12 "2023-09-26T14:11:42Z")
ha-ha oh wow. I can't believe I missed something so small. This helps so much you guys have no idea! ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [September 26, 2023, 2:29pm UTC](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/13 "2023-09-26T14:29:43Z")
I'm glad you got a solution. Don't forget to mark "Solution" to whichever answer was the relevant one.