While using border expands the box size, using outline does not.
I am not sure what problem exactly we are trying to solve here, because I don't know the shortcomings of these older browsers we are trying to cater for. I also don't really understand the difference between HTML and CSS. All HTML elements have a 'style' property, and it seems to me that thickness and placement of the borders are just as much style properties as background image and how that should be tiled. For controlling such properties statically I always use a style="background:green" type specification in the HTML element itself, (rather than a class specification and a separate CSS file), when it has to be dynamically altered from JavaScript I use assignment like getElementById('...').style.background = 'green'.
I suppose that we are dealing with the dynamic case here, where the properties of the border should be changed in reaction to selecting pieces or destinations through mouse clicks by JavaScript that is running client side. But I don't see how it would make any difference whether one uses borderWidth, background or backgroundImage as the parameter to change the visual appearance of a selected square.
I am not sure what problem exactly we are trying to solve here, because I don't know the shortcomings of these older browsers we are trying to cater for. I also don't really understand the difference between HTML and CSS. All HTML elements have a 'style' property, and it seems to me that thickness and placement of the borders are just as much style properties as background image and how that should be tiled. For controlling such properties statically I always use a style="background:green" type specification in the HTML element itself, (rather than a class specification and a separate CSS file), when it has to be dynamically altered from JavaScript I use assignment like getElementById('...').style.background = 'green'.
I suppose that we are dealing with the dynamic case here, where the properties of the border should be changed in reaction to selecting pieces or destinations through mouse clicks by JavaScript that is running client side. But I don't see how it would make any difference whether one uses borderWidth, background or backgroundImage as the parameter to change the visual appearance of a selected square.