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.

This is not about that. The problem is that putting borders around images that are already 50x50 expands table cells that are supposed to be 50x50 to something larger. There are different alternatives to doing this. One is to reduce the size of images that are too close in size to the table cell. Another is to display pieces as background images and to highlight pieces with a border over an invisible image. A third is to display pieces normally but to highlight them with the outline CSS property instead of the border CSS property.

I also don't really understand the difference between HTML and CSS.

Generally, though not completely strictly, HTML is about the structure of your web page, and CSS is used to control the appearance of HTML elements. Since HTML elements already come with default styles, they may be used to style a page to a limited extent. For example, I frequently use <i></i> for italic text, and that is just an HTML tag. HTML elements also come with attributes, which can change the appearance of an HTML element. In HTML 4, for example, <FONT> had attribute for changing the color, size, or font-face of displayed text. In HTML 5, many of these attributes are being deprecated in favor of CSS, but browsers still generally support them. CSS can be used to change the appearance of any HTML tag.

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.

The STYLE attribute on an HTML tag is a way that HTML lets you use CSS. What appears inside the value of a STYLE attribute is CSS, not HTML. You can also include CSS on an HTML page by placing it between <STYLE> and </STYLE> tags or by using a <LINK> tag to load an external style sheet.

These are similar to the ways you can include JavaScript on an HTML page. You can use attributes like onClick, onMouseOver, or whatever, or you can place it between <SCRIPT> and </SCRIPT> tags, or you can use a <SCRIPT> tag with an attribute to load an external JavaScript file. Like JavaScript, CSS is not HTML, but HTML includes ways for letting you use it.

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'.

That pertains to your own programming but doesn't seem to have an application to mine.

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.

By using outline, I am not doing anything with the border. An outline may look like a border, but it operates differently than a border. An outline goes around an image without being included as part of it, whereas a border is treated as an extension of the image. So, using an outline does not increase the size the container has to be to contain the image. The advantage to doing it this way is that images can be displayed with HTML instead of CSS, as they can be displayed as normal table cell content instead of as background images. So, if someone were using an older browser or had styles turned off, they could still see where the pieces are in the diagram. While CSS styles are being used to highlight pieces, this is not as critical a feature as showing which piece is where.