Make content go over large border

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 ever开发者_运维问答y 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;

---

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.

---

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

---

http://www.w3.org/TR/css3-background/#border-image-outset

https://bugzilla.mozilla.org/show_bug.cgi?id=564699

https://bugzilla.mozilla.org/show_bug.cgi?id=497995

this will be shipped in next revisions of browsers, and will work like a negative padding, but only relative to border-image, and only if border-image is supported

with negative margins, in fact, you will break appearance in older browsers!

for now you need to insert, as you do, a wrapper element inside the bordered content:

<div class="borderimg">
    <div class="fixpos" style="margin:-20px;">
        your content here
    </div>
</div>