As described in the diameter field description above, the diameter value excludes the border line width value of the close button. The following example is explained to simplify how you can define your close button’s size properly.
Example: Let’s say we would like to implement a close button that has a total diameter of 20 pixels. Additionally, we would like our button to have a border line which has a width of 1 pixel. The question is “what value should we enter in the diameter field to achive this size?”
As the the diameter value excludes the value of the border width, we must subtract the border line from the total diameter. Additionally, the border line width value applies to both sides of the button element, meaning it must be multiplied by 2.
To do so, we perform the following calculation:
Total diameter = 20 pixels.
Border width = 1 pixel.
In this case the diameter value should be set to 18 pixels to achieve a total diameter of 20 pixels.