Is it possible to use CSS alone to make a child div's border "override" or "remove" part of its parent's border? I want certain rows to have no border without changing the DOM structure.
Keep in mind that the innerNoBorder div has no background color.
This is an example of what I've tried (which did not work)--
Html:
<div class="outerBorder">
<div class="inner">hello</div>
<div class="innerNoBorder">world</div> <!--want this to remove/override outerBorder -->
<div class="inner">!</div>
</div>
CSS:
.outerBorder {
border: 2px solid black;
}
.innerNoBorder {
border-left:none;
border-right:none;
}
Check out the JSFiddle demo.