Should border-radius clip the content?

Question

Shouldn't the content of my container be cut off when the container has border-radius?

Sample HTML and CSS:

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

<div class="progressbar">
    <div class="buffer"></div>
</div>

As you can see I use border-radius on the container (.progressbar), but the content (.buffer) goes 'outside' the container. I'm seeing this on Google Chrome.

Is this the expected behavior?

P.S. This isn't about how to fix it, this is about whether it should work like this.

@CummanderCheckov tnx for notifying me. Let me set it up again. Although all the info *is* in my question (just for this reason) I have updated it. — PeeHaa, Nov 18 '12 at 14:04

BoltClock · Accepted Answer · 2013-09-21T16:21:54.777

Is this the expected behavior?

Yes, as crazy as it sounds, it actually is. Here's why:

The default overflow for <div> elements (and most other things) is visible, and the spec says this about overflow: visible:

visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

In turn, §5.3 Corner clipping in the Backgrounds and Borders module says:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

The sentence that I've emphasized specifically mentions that the overflow value of the box must be something other than visible (that means auto, hidden, scroll and others) in order for the corners to clip its children.

If the box is defined to have visible overflow, which like I said is the default for most visual elements, then the content is not supposed to be clipped at all. And that's why the square corners of .buffer go over the rounded corners of .progressbar.

Consequently, the simplest way to get .buffer to clip within .progressbar's rounded corners is to add an overflow: hidden style to .progressbar, as shown in this updated fiddle.

Great! Bad question (yeah I know go ask the people who made the spec), but can you think of a reason why replaced elements ARE getting clipped? PS this is a bonus question :) — PeeHaa, Dec 20 '11 at 21:42
@PeeHaa: The content that gets replaced (for example, whatever image is linked in an ``) has to be clipped, since these elements can only contain that replaced content. If not, you won't be able to apply `border-radius` to images, etc. — BoltClock, Dec 20 '11 at 21:45

score 17 · Answer 2 · edited Jan 02 '22 at 15:40

17

For anybody wondering what a fix would be. The easiest way would be to edit the css.

In the example given this would be a suitable fix:

.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; }
.buffer { width: 25px; height: 5px; background: #999999; }

<div class="progressbar">
    <div class="buffer"></div>
</div>

edited Jan 02 '22 at 15:40

P Varga

19,174
12
70
108

answered Dec 20 '11 at 21:36

owenmelbz

6,180
16
63
113

score 6 · Answer 3 · answered Jul 10 '14 at 08:20

6

Semantically speaking, it's best to simply add a border-radius inherit property to the inner div, hence the new class addition:

.buffer {
    border-radius: inherit;
}

As a consequence, for others situation, you can preserve the use of overflow: auto if the content overflows your frae and you want to see everything.

answered Jul 10 '14 at 08:20

Stéphane de Luca

12,745
9
57
95

I found this useful for some content which wasn't respecting `overflow: hidden` - much cleaner than setting the border-radius on the children by number, which I had been hoping to avoid. – Iiridayn Mar 18 '16 at 19:53
5

This is incorrect. The child content which has the same `border-radius` property will not cover the parent background sometimes. Try it with a blood red parent background, and you'll see it. – Rockallite Jul 14 '17 at 08:40

score 4 · Answer 4 · answered Jul 24 '20 at 01:56

The edges and corners of the parent container are covered by quilt elements, so the content of the parent element needs to be cropped, as long as the overflow value is set not visible, for example:

  .parent {
    overflow: hidden;
    border-radius: 5px;
  }

score 3 · Answer 5 · edited May 23 '17 at 12:01

3

This question seems to point to the same defect, apparently this is a bug.

CSS3 border-radius clipping issues

Edit

Eek! BoltClock has mentioned that this is indended so I'll post this other SO question on the topic whilst I also hunt for a spec quote on this. How do I prevent an image from overflowing a rounded corner box with CSS3?

Specification Link

Just for reference, I'll stick the relevant link in - but I can't find anything explicit to the example you've given.

CSS Backgrounds - Rounded Corners

edited May 23 '17 at 12:01

Community

1
1

answered Dec 20 '11 at 21:26

isNaN1247

17,793
12
71
118

The asker of that question misinterpreted the CSS3 spec, and the bug that is referenced concerns an `overflow` value that isn't `visible`, which is not the case here. – BoltClock Dec 20 '11 at 21:29
In the spec I've read: `The content of replaced elements is always trimmed to the content edge curve.` Which would mean it should cut off the content. Or am I reading it wrong :P – PeeHaa Dec 20 '11 at 21:29
2

@PeeHaa: `div` is not a replaced element, so that bit is irrelevant. – BoltClock Dec 20 '11 at 21:30
1

@BoltClock forgive my ignorance. But what is meant by `replaced elements`? – PeeHaa Dec 20 '11 at 21:31
2

@PeeHaa: [An element whose appearance is defined by an external source](http://reference.sitepoint.com/css/replacedelements) – isNaN1247 Dec 20 '11 at 21:34

score 2 · Answer 6 · edited Jun 20 '20 at 09:12

This is what the specifications says, so this is the way it should work. But that doesn't mean that Chrome does it like that.

5.3. Corner Clipping

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

http://www.w3.org/TR/css3-background/#border-radius

Should border-radius clip the content?

Sample HTML and CSS:

6 Answers6

Linked

Related