Propagating table cell border colors to adjoining cells
Recursion is a handy way to remove repetition...

function paintConnectedBorder(cellId, selectedBorderColor, selectedBorderSide) {
  const width = $("#pixels").data("defaultGrid").grid.width,
    totalCells = width * $("#pixels").data("defaultGrid").grid.height;

  let changedCells = [];

  if (selectedBorderSide === "all") {
    ['top','bottom','left','right'].forEach(side=&gt;
        changedCells.push(...paintConnectedBorder(cellId, selectedBorderColor, side)));
  } else {
    if (selectedBorderSide === "top" &amp;&amp; cellId &gt;= width) {
      $("#cell-" + (cellId - width)).css("borderBottomColor", selectedBorderColor);
      changedCells.push("cell-" + anId - width);
    } else if (selectedBorderSide === "right" &amp;&amp; (cellId % width - 1 !== 0)) {
      $("#cell-" + (cellId + 1)).css("borderLeftColor", selectedBorderColor);
      changedCells.push("cell-" + anId + 1);
    } else if (selectedBorderSide === "bottom" &amp;&amp; anId &lt; totalCells - width - 1) {
      $("#cell-" + (cellId + width)).css("borderTopColor", selectedBorderColor);
      changedCells.push("cell-" + cellId + width);
    } else if (selectedBorderSide === "left" &amp;&amp; (cellId % width !== 0)) {
      $("#cell-" + (cellId - 1)).css("borderRightColor", selectedBorderColor);
      changedCells.push("cell-" + cellId - 1);
    }
  }
  return changedCells;
}


Basically if 'all' is selected the function will call itself once for each of the individual selections.



As requested, here's the ES5 version for older browsers...

function paintConnectedBorder(cellId, selectedBorderColor, selectedBorderSide) {
  const width = $("#pixels").data("defaultGrid").grid.width,
    totalCells = width * $("#pixels").data("defaultGrid").grid.height;

  let changedCells = [];

  if (selectedBorderSide === "all") {
    var sides = ['top','bottom','left','right'];
    for(var i=0, side; side=sides[i]; i++)
        changedCells.push.apply(changedCells, paintConnectedBorder(cellId, selectedBorderColor, side)));
  } else {
    if (selectedBorderSide === "top" &amp;&amp; cellId &gt;= width) {
      $("#cell-" + (cellId - width)).css("borderBottomColor", selectedBorderColor);
      changedCells.push("cell-" + anId - width);
    } else if (selectedBorderSide === "right" &amp;&amp; (cellId % width - 1 !== 0)) {
      $("#cell-" + (cellId + 1)).css("borderLeftColor", selectedBorderColor);
      changedCells.push("cell-" + anId + 1);
    } else if (selectedBorderSide === "bottom" &amp;&amp; anId &lt; totalCells - width - 1) {
      $("#cell-" + (cellId + width)).css("borderTopColor", selectedBorderColor);
      changedCells.push("cell-" + cellId + width);
    } else if (selectedBorderSide === "left" &amp;&amp; (cellId % width !== 0)) {
      $("#cell-" + (cellId - 1)).css("borderRightColor", selectedBorderColor);
      changedCells.push("cell-" + cellId - 1);
    }
  }
  return changedCells;
}