Is it possible to have a child Div remove portion of parent div's border?

Question

Using just CSS is it possible to have a child div border "override" or "remove" a portion of its parent's border? Essentially I'd like to have a border but not on the outside of specific rows, and I'd like to do so without rearranging the DOM structure.

Note that the innerNoBorder div does not have a background color.

Example of what I have (which does not work)--

Html:

<div class="outerBorder">
    <div class="inner">hello</div>
    <div class="innerNoBorder">world</div> <!--have this remove border / override outerBorder -->
    <div class="inner">!</div>
</div>

CSS:

.outerBorder {
    border: 2px solid black;
}

.innerNoBorder {
    border-left:none;
    border-right:none;
}

JSFiddle demo.

Answer 1

The border property isn't inherit from the parent, so your try won't work... but you already figured that out.

You can overlap the parent div though by using a negative margin on the child. Do note that you'll need to give the child a background-color to make it functional.

.innerNoBorder {
    background: yellow;
    margin-left: -2px;
    margin-right: -2px;
}

Updated Fiddle

Alternativ

Same method, but than with a white border:

.innerNoBorder {
    border: 2px solid white;
    border-width: 0 2px;
    margin-left: -2px;
    margin-right: -2px;
}

Updated Fiddle

Answer 2

No, it is not possible.

Can you not just set the .outBorder to have no left border?

.outerBorder {
  border-left-width: 0;
}

Or you could position the .innerNoBorder div over the left side of its parent, something like this:

.innerNoBorder {
margin-left: -2px;
border-left: 2px solid white;
}

Answer 3

You can use box-shadow:

.innerNoBorder {
    box-shadow: 0 0 0 2px white;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/bc6uLmhx/5/