Re: [css3-background] Curved borders intersecting backgrounds of inner boxes

On Mon, Apr 12, 2010 at 8:54 AM, Zack Weinberg <zweinberg@mozilla.com> wrote:
> "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>>
>> While I am extremely sympathetic to this view, and would love to
>> support it, I agree with dbaron right now that there's no sane way to
>> distinguish between when an element should clip its children to the
>> curve (even without overflow:visible) and when it shouldn't.
>
> Can you come up with an example where it shouldn't clip the background
> (not the content) of an inner box? I presently can't think of one.

Sure.  Any time you use a negative margin to yank something slightly
outside of its parent, you won't want it to clip.  I like using that
effect for some things, such as pulling the title of a section
slightly out so it's somewhat "bigger" than the article box.

article {
  border: 3px solid silver;
  border-radius: 10px;
}

article > h1 {
  border: 3px solid black;
  border-radius: 1em;
  background: #ffe;
  color: black;
  margin: -1em -1em 1em;
}

>> I certainly *have* gotten bad renderings before from this effect, I
>> just don't think we we can do anything sane to treat it.  At least
>> it's an easy fix when it happens (just pop a border-radius on the
>> relevant corners of the child, too).
>
> You can't match the inner curve of an outer box's border with
> border-radius on an inner box, unless the inner box's border rectangle
> happens to be exactly the same size as the outer box's padding
> rectangle.

That's not difficult to achieve.

~TJ

Received on Monday, 12 April 2010 17:22:25 UTC