Border & Foreground Color

It seems that the “color” property affects both foreground color and border color for simple controls such as GUI.InputText, GUI.Rectangle, etc. Can these be set independently, or are they this way by design (and I’d need to get creative with background layers, e.g., in order to do this)?

You can access the sub-elements of the controls and change whatever

1 Like

Does “sub-elements of the controls” mean something specific that I am unable to comprehend or find in documentation? Or are you simply referring to properties, methods, accessors, etc. (which of course I’ve examined without any luck)? Even better - perhaps you can show me a quick snippet of how you would set the color of the text input’s border without changing its text color by using this “sub-element”. LOL - thank you for the reply, I just need a tad more!!

I forgot that the textInput it is a single element. So I guess it would be better to make your own element:


Hello @Slimfinger just checking in, was your question answered? :slight_smile:

Not really ( at least I don’t think so!) :slight_smile:

cc @DarraghBurke

You need to set the background property of a control to give it a border. You can also set the strokeWeight to adjust the border thickness. Here is an example of different color combinations:

Babylon.js Gui Editor (

EDIT: correction, the border thickness is controlled by the thickness property, not strokeWeight.

1 Like

I posted a pg with an example of how to make an element with different text color and outline…

That should have awnsered your question.

@DarraghBurke - it appears that in your examples, the text color and the border color are the same, and not independent of each other.

@Pryme8 - thanks for the example, but it nonetheless does not address my question.

I’m pretty confident that this cannot be done in the base control, but I just want reassurance of this, as it seems a little unusual. Unless I’ve misunderstood, neither response directly addressed the actual question.

  • Your question and request…

Followed by a direct code example of how to do it… I’m not sure how your question is not answered.

If a single property is tied to two visual elements in a control, just spin up two of them and layer them or extend a simple control.


Ah, sorry for the misunderstanding. Yes, there is currently no independent text color property in the control that is separate from the border color. However, @Pryme8’s suggestion would be a great approach to handling this

1 Like

You are conflating several things here. The actual question was indeed NOT answered, as I specifically asked if these properties could be set independently for those basic controls. It appears the answer is “no” (which neither responder directly answered).

The other part of your response seems to center around some confusion as to what you meant by the term “sub-element”. Apparently, you were talking about a derived class or subclass, but as I had never heard this term before it sounded to me as though you were talking about some kind of sub-parts of the control, or something else that I was unclear about. That’s why I asked for an example. Of course it is trivial to solve this issue by adding functionality, but again, that wasn’t my question.

Thanks anyhow, and sorry about any confusion.