<div class="toolbar">
  <label for="writing-mode-select">Choose writing mode:</label>
<select name="writing-modes" id="writing-mode-selec">
    <option value="horizontal-tb">horizontal top to bottom</option>
    <option value="vertical-lr">vertical left to right</option>
</select>
</div>

<div class="boxes">
  <div class="box box-1">
    none
  </div>

  <div class="box box-2">
    hidden
  </div>

  <div class="box box-3">
    solid
  </div>

  <div class="box box-4">
    dashed
  </div>

  <div class="box box-5">
    dotted
  </div>

  <div class="box box-6">
    double
  </div>

  <div class="box box-7">
    groove
  </div>

  <div class="box box-8">
    ridge
  </div>

  <div class="box box-9">
    inset
  </div>

  <div class="box box-10">
    outset
  </div>
</div>

body {
  font-family: Arial;
  width: 100%;
  padding: 1em;
}

.toolbar {
  margin-block-end: 2rem;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

select{
  padding:10px 20px;
  border-radius:5px;
  margin:0 20px;
}

.boxes{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.box {
  background: #eaeaea;
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width:800px){
  .boxes{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:500px){
  .boxes{
    grid-template-columns: repeat(2, 1fr);
  }
}

.horizontal-tb {
  writing-mode: horizontal-tb;
}
.vertical-lr {
  writing-mode: vertical-lr;
}

.box-1 {
  border-inline: none;
}

.box-2 {
  border-inline: 5px hidden red;
}

.box-3 {
  border-inline: 5px solid red;
}

.box-4 {
  border-inline: 5px dashed red;
}

.box-5 {
  border-inline: 5px dotted red;
}

.box-6 {
  border-inline: 5px double red;
}

.box-7 {
  border-inline: 5px groove red;
}

.box-8 {
  border-inline: 5px ridge red;
}

.box-9 {
  border-inline: 5px inset red;
}

.box-10 {
  border-inline: 5px outset red;
}

document.getElementById("writing-mode-selec").onchange = (e) => {
  var className = e.target.value;

  let boxContainer = document.getElementsByClassName("box");

  for (let i = 0; i < boxContainer.length; i++) {
    let containerBox = boxContainer[i].classList;

    if (className == "horizontal-tb" || "vertical-lr") {
      containerBox.remove("horizontal-tb");
      containerBox.remove("vertical-lr");
    }

    containerBox.add(className);
  }
};