Re: [Backgrounds/Borders] What to do when a border-image fails to load

On Mon, Mar 30, 2009 at 10:43 AM, Brad Kemper <> wrote:
> On Mar 30, 2009, at 8:23 AM, Tab Atkins Jr. wrote:
>> On Mon, Mar 30, 2009 at 10:05 AM, Brad Kemper <>
>> wrote:
>>> In each case, it would be useful to have border-radius for fallback, for
>>> background-clipping, and for hit/hover-testing, but not for clipping the
>>> border-image.
>> Certainly; I did not mean to imply otherwise.
> Actually, David Hyatt implied in a different thread a few days ago that
> hit-testing was based fairly strictly on clipping, so I was also
> incorporating that info into my reply to you, above. Maybe he could find a
> way to clip the hit/hover-testing without clipping the border though, as you
> and I would prefer.

Look at it in the broader picture.  If hit-testing was based on
clipping, then it would be impossible to have the border-image extend
outside of the border-box.  But Dave is cool with the border-image
extending outside of the clipping area.  So obviously there's no
problem.  ^_^

More specifically, I believe that in your proposal the border-image
paints independently of *everything* else.  As you say in your
proposal, it acts like an abspos element sized to the border box
(modulo the offsets), which is otherwise independent of the box

>> It should have a layout
>> effect, as it does now,
> Does it? I didn't think border-radius changed where anything is placed or
> how much room it takes up. Maybe that's not what you meant?

I meant the layout of an element's contents.  But I was wrong!

>> but in and of itself be invisible, and have no
>> effect on border-image (which already ignores all other layout
>> concerns in your proposal).
> Right. It would still clip the content (non-positioned descendants), for
> much the same reason it clips the background (because it is part of the
> border-box shape that contains the background and contents, while
> border-images create their own shapes).

It certainly clips the background, but not the content, from what I
can tell.  In the following document:

<!DOCTYPE html>
p {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background: yellow;
p:hover {
  background: red;
<p>This is some example text.  It is for an example.</p>

You should see a 100x100 black circle, filled with yellow, with text
clearly spilling out of the border curve.  Hit testing is also
obviously based on the invisible border box, ignoring the curve.


Received on Monday, 30 March 2009 17:25:03 UTC