title: Reverse padding with CSS
body: <p>I'm working on a website, and I'm trying some new stuff with CSS.  More for "flair" than anything, but I want the site to look good.  :)</p>
  
  <p><img src="https://i.stack.imgur.com/SFabP.png" alt="alt text"></p>
  
  <p>In the picture above, I want the line to actually be "in" the white box saying "Welcome to Moria" so it looks as though the white line comes /out/ of the box and stretches across.  Basically, I want the white line down a few pixels.  (or everything else up a few pixels.)</p>
  
  <p>This is the HTML of the section:</p>
  
  <pre><code>&lt;div class = "paragraphSection"&gt;
      &lt;span class="textHeading"&gt;Welcome to Moria&lt;/span&gt;&lt;span class="mainBodyText"&gt;
      Moria is a Minecraft server, which we have evolved into fun place to 
      build, talk, and fight. Everyone is welcome to join us play!  Of course, you should probably 
      read this page to understand what is happening, because it's a little more then 
      just Minecraft.&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is the CSS I'm trying to use:</p>
  
  <pre><code>.paragraphSection {
      border-top-style:solid;
      border-top-width:1px;
      border-color:white;
      padding-top:0px;
  
  }
  
  .textHeading {
      font-size:2em;
      padding-left:3px;
      padding-right:3px;
      background-color:white;
      padding:-10px;
  
      -moz-border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
  }
  </code></pre>
  
  <p>What I tried to do was simply making the padding element negative, so it would go "up" instead of down.  However, that didn't work at all.  I thought you could do that, but apparently not.  So I'm not sure how to make the border of the paragraphSection move down.</p>