How to set border styles for right, bottom and left in one statement

Question

I want to set the border property of an element on the right, bottom and left only without the top, so I am doing it in three lines like this:

document.getElementById("frmCreateUsernameAcknowledgement_flxSegmentDropdownContainer")
        .style.borderRight="solid 1px #D8D8D8";
document.getElementById("frmCreateUsernameAcknowledgement_flxSegmentDropdownContainer")
        .style.borderBottom="solid 1px #D8D8D8";
document.getElementById("frmCreateUsernameAcknowledgement_flxSegmentDropdownContainer")
        .style.borderLeft="solid 1px #D8D8D8";

It works, but I don't want to do this on three lines, so my question is there a way to set the border property on right, bottom and left in one line?

`var el = ...; el.style.borderRight = el.style.borderLeft = el.style.borderBottom = ...`; `.special-border { border-right: ...; }` + `el.className = "special-border";` — Andreas, Feb 11 '20 at 09:53
Just a suggestion though. Instead of doing this, set border style in general and then set border-top to 0px — Rajesh, Feb 11 '20 at 09:54

score 0 · Answer 1 · answered Feb 11 '20 at 09:55

If you want to stick with the solution of setting the border using the DOM style rather than modifying the CSS property then you could simplify your code a little by setting the whole border and then removing the top border:

document.getElementById("myDiv").style.border="solid 1px #D8D8D8";
document.getElementById("myDiv").style.borderTop="";

div {
  height: 100px;
  width: 100px;
}

<div id="myDiv"></div>

How to set border styles for right, bottom and left in one statement

1 Answers1