Sizing and positioning a border property

Question

Is there a css where I could size and position the border-left property? Or a "hack"? Below shows what I'd like to have. The black rectangle represents the column and the red, the border I'd like to have on that column. Possible?

If not, could I add another div inside then give that div the border property?

Answer 1

You can use :before pseudo element with position: absolute

.column {
  position: relative;
  height: 200px;
  width: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.column:before {
  content: '';
  height: 50px;
  width: 3px;
  background: red;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<div class="column">Column</div>

Answer 2

You can also do this with gradients and background-clip.

div {
  width: 100px;
  height: 300px;
  border-width: 2px;
  border-style: solid;
  border-color: black black black transparent;
  background-image: linear-gradient(white, white), linear-gradient(to bottom, black 30%, red 30%, red 60%, black 0);
  background-clip: padding-box, border-box;
}

<div></div>