Border in CSS is changing the output of getBoundingClientRect()

Question

I’m creating a Snake Game in Javascript and to perform animations, collision detection and others, I use the function getBoundingClientRect(), to get the position left and top of a game element.

I just completed almost the whole game and everything works perfectly, however when adding a border in my CSS file for div <div id="game"></div> which is where my game runs, my little hedge started to move diagonally.

#game{
    background: rgb(80, 80, 80);
    border: 2px solid #000;
    margin-top: 30px;
    width: 450px;
    height: 450px;
}

Below is the code of my method that gets the position of the game elements and the method that moves the cover and sets a position for the elements:

getPositionOf: function(element){

    var game_rect = this.game.getBoundingClientRect();
    var element_rect = element.getBoundingClientRect();

    return {left: element_rect.left - game_rect.left, top: element_rect.top - game_rect.top};
},

move: function(){

    var head = this.body[0];  // Obtém a cabeça da cobra
    var {left: head_left, top: head_top} = this.getPositionOf(head);

    // this.direction.speed == [0, -10]
    head_left += this.direction.speed[0];  
    head_top += this.direction.speed[1]; 

    this.setPositionOf(head, head_left, head_top);

    // ...
},

setPositionOf: function(element, left, top){

    element.style.left = left + "px";
    element.style.top = top + "px";
}

To make sure that the problem was in this method, or rather in the function getBoundingClientRect, i have placed within the method the following code to verify which position of the cover the function returns ( keep in mind that the snake must move upward at a speed of 10px ):

if (element.className == "snake"){
    console.log(element_rect.left, element_rect.top);
}

The result of this in console when executing the application without the edge:

448.5 258                          snake.js:42 
448.5 248                          snake.js:42 
448.5 248                          snake.js:42 
448.5 238                          snake.js:42

The result when executing the application with the border:

448.5 260                          snake.js:42 
450.5 252                          snake.js:42 
450.5 252                          snake.js:42 
452.5 244                          snake.js:42 

My question is, why the return of getBoundingClientRect() changes when adding a border for the div game and what I can do to solve the problem ?