Why is the background still included when applying the border?

Question

Can someone help me ensure that when

if (request.greeting === "border") { }

is called, only the border is set and not the previously selected background color?

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 
if (request.greeting === "background") { 
[...]
 window.addEventListener('click', function (e) {
      let topDiv = document.elementFromPoint(e.clientX, e.clientY);
        topDiv.style.backgroundColor = topDiv.style.backgroundColor == backgroundColorPicker.value ? '' : backgroundColorPicker.value;
                            }
                        });


[...]

if (request.greeting === "border") { 

window.addEventListener('click', function (e) {
    let topDiv1 = document.elementFromPoint(e.clientX, e.clientY);

    if (topDiv1.id === 'mainDivBryan' || 
        const selectedThickness = document.getElementById('mainDivBryanborderThickness').value;
        const selectedStyle = document.getElementById('mainDivBryanborderStyle').value;

        topDiv1.style.border = `${selectedThickness}px ${selectedStyle} ${borderColorPicker.value}`;


    }