title: css border-bottom before padding
body: <p>Is it possible to apply a <code>border-bottom</code> before <code>padding</code> without inserting an immediate element, i.e., within the <code>content</code> box itself? For example, below I created a wrapper <code>div</code> with <code>s3</code> on the class. Can I avoid this?</p>
  
  <p>Here is a <strong><a href="https://jsfiddle.net/o8y83a60/" rel="nofollow">JSFiddle</a></strong>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.top {
    border: 1px solid black;
  }
  .s2 {
    margin: 15px;
    padding: 15px;
    border-bottom: 1px solid blue;
  }
  .s3 {
    border-bottom: 1px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top"&gt;
    &lt;div class="s2"&gt;
      s2
    &lt;/div&gt;
  
    &lt;div class="s2"&gt;
      &lt;div class="s3"&gt;
        wrapped in s3
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've been searching around for a solution to this which leads me to think it's not possible. I don't mind using any solution as long as it does not require me positioning items relatively or absolutely. Thought CSS pseudo-element might allow me to do this but it doesn't.</p>