Minus Border Width

http://posterous.com/getfile/files.posterous.com/temp-2011-05-05/tuHoGhEqBvCvieniHkezoevufFoxjesoIzIrfIjexnfmzIvujokwDsbkDtbv/Mock_UP_Three_edit2_web_pp.jpg.scaled1000.jpg

Whats the best way of creating the effect on the edge of the twitter section ?


border-width:0 7px;
-webkit-border-image: url(images/border2.png) 50 50 50 50 repeat;
-moz-border-image: url(images/border2.png) 0 50 repeat;
border-image: url(images/border2.png) 0 50 repeat ;

Using this

http://s3.amazonaws.com/files.posterous.com/temp-2011-05-07/byfJxlbxdqElDDvxvibjCfiDtlielGqoqIBahkreiwsCIwDgcJapIuItuknv/border.png.scaled500.png?AWSAccessKeyId=AKIAJFZAE65UYRT34AOQ&Expires=1304885501&Signature=gUv%2F%2B%2F9pUgJIo0%2FTMFx1uBE9PNw%3D

But the border stays within the tweet div so does not show transparent background.

I don't know another way of doing it because you can't use negative border widths.

Not entirely sure I've understood, but there is 'border-color: transparent;' for a transparent border, but I don't know whether it's universally supported.

basically, how would you go about making the jagged border on the twitter div ?

this div does resize height wise..

just not sure the best way to go about it. I want something universal really.

issue has been fixed. transparent border colour did not work, i used background-clip !

thanks anyway.

No problem.

Background-clip is a CSS3 property and (like a transparent colour) is not hugely supported. However, there is some helpful information about it at css tricks (http://css-tricks.com/transparent-borders-with-background-clip/).