Calibrate and position border properties

Question

Is there any css where I could size and position the border-left property? Or hack? Below is what I would like to have. The black rectangle represents the column and the red, the borders that I would like to have in this column. Is it possible?

If not, can I add another div inside, then give the div a border property?

Answer 1

You can use the :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 a 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>