W3C home > Mailing lists > Public > www-style@w3.org > April 2010

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 12 Apr 2010 10:21:29 -0700
Message-ID: <y2mdd0fbad1004121021y89b09682n72f2d23e8d94267a@mail.gmail.com>
To: Zack Weinberg <zweinberg@mozilla.com>
Cc: "L. David Baron" <dbaron@dbaron.org>, W3C Emailing list for WWW Style <www-style@w3.org>
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.

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:45 UTC