Combining border image and radius

CSS	Your Browser	WebKit r39553	Firefox 3.2a1pre
`div { background-color: yellow; width: 200px; height: 200px; font-size:9px; padding:10px; border:40px dotted orange; -webkit-background-clip:padding; -moz-background-clip:padding; background-clip:padding-box; }`	I agree that it should clip the background (and foreground blocks) when there is no border-image. I can even see the point of maintaining that behavior on those properties when border-image is in use. But the border-image might contain a more complex clipping (using a PNG, for instance), than the border-radius could achieve on its own. That might be the use case for using them together, in fact. The only use case for having the border-radius clip the border-image, is if they both have the exact same path to clip to anyway.	Notes: Webkit has a funny idea of what a dot is. Their's are square, and they get longer when they go around a corner.	Notes: Gecko has round dots, except for the corners, and then they have a have dot after each corner (clockwise).
`.borderradius { -moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px; }`	I agree that it should clip the background (and foreground blocks) when there is no border-image. I can even see the point of maintaining that behavior on those properties when border-image is in use. But the border-image might contain a more complex clipping (using a PNG, for instance), than the border-radius could achieve on its own. That might be the use case for using them together, in fact. The only use case for having the border-radius clip the border-image, is if they both have the exact same path to clip to anyway.	Notes: In Webkit, the background does not get clipped to the inside of the curved corners. The author's intent is that with 'background-clip:padding-box' it would be clipped on the inside of the border, even where the border is curved. Bug?	Notes: Gecko is not (yet?) honoring the dotted border style within its curved corners.
`.borderimage { -moz-border-image: url(borderimage.png) 40; -webkit-border-image: url(borderimage.png) 40; border-image: url(borderimage.png) 40; }`	I agree that it should clip the background (and foreground blocks) when there is no border-image. I can even see the point of maintaining that behavior on those properties when border-image is in use. But the border-image might contain a more complex clipping (using a PNG, for instance), than the border-radius could achieve on its own. That might be the use case for using them together, in fact. The only use case for having the border-radius clip the border-image, is if they both have the exact same path to clip to anyway.
`class="borderradius borderimage"`	I agree that it should clip the background (and foreground blocks) when there is no border-image. I can even see the point of maintaining that behavior on those properties when border-image is in use. But the border-image might contain a more complex clipping (using a PNG, for instance), than the border-radius could achieve on its own. That might be the use case for using them together, in fact. The only use case for having the border-radius clip the border-image, is if they both have the exact same path to clip to anyway.	Notes: Webkit showing the same problem as above with the clipping, but now the clipping seems even more out of step with the author's intention.	Notes: Gecko gets it right. Background is clipped to the inside of the border, as per 'background-clip', making this a useful way to combine 'background-clip', 'border-image', and 'border-radius'.

CSS

Expected results

Your Browser

WebKit r39553

Firefox 3.2a1pre

div {
   background-color: yellow;
   width: 200px;
   height: 200px;
   font-size:9px;
   padding:10px;
   border:40px dotted orange; 
   -webkit-background-clip:padding;
   -moz-background-clip:padding;
   background-clip:padding-box;
}

I agree that it should clip the background (and foreground blocks) when there is no border-image. I can even see the point of maintaining that behavior on those properties when border-image is in use. But the border-image might contain a more complex clipping (using a PNG, for instance), than the border-radius could achieve on its own. That might be the use case for using them together, in fact. The only use case for having the border-radius clip the border-image, is if they both have the exact same path to clip to anyway.

Notes: Webkit has a funny idea of what a dot is. Their's are square, and they get longer when they go around a corner.

Notes: Gecko has round dots, except for the corners, and then they have a have dot after each corner (clockwise).

.borderradius { 
   -moz-border-radius: 150px; 
   -webkit-border-radius: 150px;
   border-radius: 150px;
}

Notes: In Webkit, the background does not get clipped to the inside of the curved corners. The author's intent is that with 'background-clip:padding-box' it would be clipped on the inside of the border, even where the border is curved. Bug?

Notes: Gecko is not (yet?) honoring the dotted border style within its curved corners.

.borderimage {  
   -moz-border-image: 
      url(borderimage.png) 
      40; 
   -webkit-border-image: 
      url(borderimage.png) 
      40; 
   border-image: 
      url(borderimage.png) 
      40; 
}

class="borderradius borderimage"

Notes: Webkit showing the same problem as above with the clipping, but now the clipping seems even more out of step with the author's intention.

Notes: Gecko gets it right. Background is clipped to the inside of the border, as per 'background-clip', making this a useful way to combine 'background-clip', 'border-image', and 'border-radius'.