Possible to change border position based on adjacent blocks in CSS?

Question

I'm using a flexbox layout with a few blocks that can wrap. I'd like each block to create a border dynamically depending on its position relative to adjacent blocks.

For example, if it is to the right of a block, I'd like a border on its left-hand side. If it is below a block, I'd like a border atop it. If it's smack in the middle of a group of boxes, I'd like it to have a full border.

The closest I've come to a solution is to style according to viewport width through @media, but it's not nearly close enough.

Any suggestions?

EDIT: Here is a link to a JSFiddle with a sidebar whose border changes on wrap (the code is pretty shoddy, I know): https://jsfiddle.net/crisis_sheep/zkh3yksn/1/embedded/result/

The main bit of CSS for this:

@media all and (min-width: 60em) {
    .sidebar-content { 
        border-left-style:  solid;
        border-left-width:  1px;
        border-left-color:  black;
        margin-left:        10px;
    }
}

@media all and (max-width: 60em) {
    .sidebar-content {
        width:              70%;
        border-top-style:   solid;
        border-top-width:   1px;
        border-top-color:   black;
        margin-top:         10px;
    }
}

Answer 1

You can use pseudo elements and overflow: hidden; for parent element

.border-cutter {
  overflow: hidden;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 100px;
  border-right: 0;
  margin: 5px 6px 6px 5px;
  flex: 0 1 200px;
  position: relative;
  background: #d0d;
}
.item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #000;
}
.item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 1px;
  background: #000;
}

<div class="border-cutter">
  <div class="flex">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>