Why the CSS3 background-clip or background-origin doesn't work? What's wrong with my code?

I want use three images to make a background:

As well I want use CSS3 background-clip or background-origin property,to use multiple images here is my css code:

    .border
    {
        background:url("fancy_title_main.png"),url("fancy_title_left.png"),url("fancy_title_right.png");
        background-repeat:repeat-x,no-repeat,no-repeat;
        background-position:center,left,right;

        background-clip: content,border,border;
        background-origin:content,border,border;
        -moz-background-clip: content,border,border;
        -moz-background-origin: content,border,border;
        -webkit-background-clip: conten开发者_开发问答t,border,border;
        -webkit-background-origin：content,border,border;

        border-width:0 15px;
        border-style:solid;

        width:80px;
        height:32px;
    }

however,it doesn't work,on firefox 3.6.6:

in the firebug:

In my css ,I set the -moz-background-clip: content,border,border; but it show -moz-background-clip:border, border, border;Why?

How can I make the background like I wanted?What's wrong with my CSS code?

Thank you

You need to be using content-box, border-box, and padding-box.

https://developer.mozilla.org/en/CSS/background-clip

You might want border-color: transparent (and see also my comment above).