Change the border's color of a button in Unity

Question

I began to work with Unity3D since one month and I'm trying to do an application which contains a menu, composed by a panel and several buttons. At this moment, I'm trying to customize the menu, I change the fill color of the panel and buttons, but until now I could not change the border color of the buttons. There is any way to customize the border's color of the UI buttons? I would appreciate your help. :)

Answer 1

No, you can not change just border color. If you use default buttons, take a look at Source image. It is basically a grey square with black borders. So when you change color of image black color remains black. To customize buttons as you want you need either create nested UI elements:

or create sprites with colors you want and replace source image

Answer 2

I find nested UI elements to be the easiest way to do something like this. Simple example:

Start out by creating a panel and change the scale until you get the desired size for your button. This will be your "borders".

Next create another panel as a child of the panel you just made and change the scale to be just slightly smaller than your first panel and change the color.

In the Inspector for your panel, add component and type in Button and add it as a component.

Finally, add a text as a child of your panel for a label and you're done.