Using border-image on just one side

[seegoon]

Hi guys.

I'd like to use an image as my border on just the right side of a div, to create an arrow shape on a 'continue' link. I've created the image to use and tried to code it myself, but failed miserably on both Safari and Firefox. Here's my current code:

#continue {
background-color:#ebebeb;
margin:20px 0px 20px 0px;
height:45px;
border-image-right:url("images/continue-arrow.gif") 100% round;
width:80%;
float:right
}

I have no doubt I'm getting something completely fundamental completely fundamentally wrong.

Thanks for your help.

[drhowarddrfine]

Supposed to be 'border-right-image'

[seegoon]

Well that's just shameful of me, really. I've changed that, but it still isn't working. Does anything else look screwy? I've double checked the filename, by the way, and the actual html definitely calls <div id="continue"> .

Thanks.

[seegoon]

Solved it

Okay, I had to go back and scrap trying to just use 'border-right-image' and instead used all of 'border-image', sticking in 0's when I wanted nothing present. Here's how the code looks now, remembering that my arrow is 24px wide:

#continue {
background-color:#ebebeb;
margin:20px 0;
height:45px;
border-width:0 24px 0 0;
-webkit-border-image:url(images/continue-arrow.gif) 0 24 0 0 round;
-moz-border-image:url(images/continue-arrow.gif) 0 24 0 0 round;
border-image:url(images/continue-arrow.gif) 0 24 0 0 round;
width:auto;
float:right;
}

Seems I was a loooong way off the mark with my initial attempt. But as they say, if you fall off the horse...