Make content go over large border

Question

I have the following rules:

.borderedCanvas{
    border-width: 89px 95px;
    -webkit-border-image: url(/images/canvas_bg.png) 89 95 repeat stretch;
    -moz-border-image: url(/images/canvas_bg.png) 89 95 repeat stretch;
    border-image: url(/images/canvas_bg.png) 89 95 repeat stretch;
    width: 700px;
}
.borderedContent{
    margin: -60px;
    width: 820px;
    display: block;
}

And the following html:

<div id="login" class="borderedCanvas">
  <div id="loginBox" class="borderedContent">
    <form>
    ...
    </form>
  </div>
</div>

It creates a ~90px wide border around the div I apply it to. Now I want that every content inside borderedCanvas divs gets expanded to inside the border 60px. This is because although I had to use ~90px, the real border appears as if it is only 20px. I tried the adding the following rule to .borderedCanvas it had no effect: padding: -60px;

Answer 1

Actually, don't forget that you're using CSS3, and while you're using CSS3 you can use CSS2. And CSS2 have pseudo-elements and all other juicy things!

So, you can achieve the thing you want without any extra elements just by using pseudo-elements like ::before!

So, there is a fiddle: http://jsfiddle.net/kizu/UxJ8H/

The things worth mentioning:

1. See how you can use negative z-index on a pseudo-element with positive on the element itself to put the pseudo-element user the content.

2. With CSS2 you can set the left+right and top+bottom values for absolute positioning at the same time, so you can position the pseudo-element like you want.

So, combining pseudo-elements with border-image and positioning you can active a loooot of effect just like this easy.

Answer 2

Negative padding does not work... Padding is the inner-fill of an element, not the outer. Use margin: -60px instead.