Reverse padding with CSS

Question

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. :)

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.)

This is the HTML of the section:

<div class = "paragraphSection">
    <span class="textHeading">Welcome to Moria</span><span class="mainBodyText">
    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.</span>
    </div>

And this is the CSS I'm trying to use:

.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;
}

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.

Solution 1

Try this:

.textHeading{
  position:relative;
  top:-5px; //Adjust it according to what looks good to you.
  .
  .
}

Solution 2

I would go for a negative top margin:

.textHeading {
  margin-top: -5px;
  ...
}

Negative padding is not allowed as per the spec and therefore must be ignored:

Unlike margin properties, values for padding values cannot be negative.

Source: CSS 2.1 Specification: 8.4 Box model: Padding properties