title: CSS3 Make a Descendant Element Turn off a Parent's Border Styling
body: <p>I know that text-decoration-skip can be used to make descendant elements turn off their parent's text decorations such as underlining, line-through, and overline, but is there a comparable way to turn off borders in a descendant element?</p>
  
  <p>Example HTML:</p>
  
  <pre><code>&lt;p class="border"&gt;This text has a border 
      &lt;span class="no_border"&gt;and this text doesn't&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Example CSS:</p>
  
  <pre><code>.border {
  border: 1px solid #FF0000;
  }
  
  .no_border {
      /* magic border turn off trickery */
  }
  </code></pre>
  
  <p>I would appreciate any method you know of for doing this as I think it would be a very nice effect, but I'm starting to think it may be impossible base on this question: <a href="https://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element">CSS text-decoration property cannot be overridden by child element</a>.</p>
  
  <p>Someone asked why not just add another span element. While That is probably the best solution, and I should probably just start doing it, the reason why I hesitate is because my text is being generated with things like this:</p>
  
  <pre><code>$('&lt;p/&gt;', { "id" : "seq_insert_" + i, "class" : arraySeqArrays[i].getBaseType() + " " + arraySeqArrays[i].getFivePrime(), "text" : subsequence } ).add($('&lt;p/&gt;', { "id" : "comp_insert_" + i, "class" : arraySeqArrays[i].getBaseType() + " " + arraySeqArrays[i].getThreePrime(), "text" : subcomplement } )).wrapAll('&lt;td/&gt;').parent().appendTo('#' + subsequenceId);
  </code></pre>
  
  <p>So I can probably figure out a way to add another span to that, but might take me awhile heh.</p>