When I click a button in game I see a blue square border..

..and how do I prevent this?

My button object is a regular button with a Set CSS Style event at layout start. This all looks fine but when I click the button it gets a square border around it. This is obviously very visible on a rounded button.

I have no 'on Click' events.

See image ..

Each browser has some default stylings applied to everything... I believe that is the input:focus selector, which we can't get to in construct.

You might want to try setting outline:none to see if it works.

Alternatively:

outline-style:none;

box-shadow:none;

border-color:transparent;

It is a pain, but stuff like that is why it is recommended to just use sprites instead.

Great. Thanks!

Each browser has some default stylings applied to everything... I believe that is the input:focus selector, which we can't get to in construct.

You might want to try setting outline:none to see if it works.

Alternatively:

outline-style:none;

box-shadow:none;

border-color:transparent;

It is a pain, but stuff like that is why it is recommended to just use sprites instead.

I would definitely be using sprites rather than an actual button. You will have a finer degree of control over any visual effects. I'll often use an online button maker to create a button and then download the resulting image which I then import as a sprite into my games.