Clip the contents of the child to the parent

HTML & CSS
1

On the slider on this site > http://clickbump.com/

The top left corner has a “callout” div in which the top left corner is extending outside the boundary of the parent element. I want to clip the boundary so that the parent element’s rounded corner shows through.

I’ve tried adding overflow:hidden to the parent container element, but it does not seem to want to work.

Any ideas?

2

I can’t see any callout top left, Scott. Could you clarify what you mean?

3

Hi Ralph, the callout is the text block inside the slider. On the first slide, it begins with the h2 “ClickBump 6”. There is a div container holding that with class=“callout”. This is the element which appears to be extending outside the border-radius of the dd parent element.

I’ve since moved the callout over to the right in order to avoid the glitch with the overflow. I believe it may have something to do with the fact that the element is being rotated with transform.

4
Off Topic:

Hm, FYI, I’m getting a database error when I visit the site now …

5

Hi,

webkit has trouble clipping elements to border-radius even in simple situations where position is concerned.

In this small demo the blue box extends out of the container in webkit and opera but not in IE9 or Firefox.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test {
	background:red;
	width:200px;
	height:200px;
	border-radius:50px;
	overflow:hidden;
	background-clip:padding-box;
 position:relative;/* remove this and blue inner is clipped */
}
.inner { background:blue; }
</style>
</head>

<body>
		<div class="test">
				<div class="inner">test</div>
		</div>
</body>
</html>

If you remove the position:relative above then all browsers clip the content inside the border-radius.

One way around it would be to wrap a parent that has the position:relative applied.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test {
	background:red;
	width:200px;
	height:200px;
	border-radius:50px;
	overflow:hidden;
	background-clip:padding-box;
}
.inner { background:blue; }
.outer { position:relative; }
</style>
</head>

<body>
<div class="outer">
		<div class="test">
				<div class="inner">test</div>
		</div>
</div>
</body>
</html>

However you would still need to avoid position:relative on any elements that you want to stick out because they won’t get clipped inside the border-radius. Add position:relative to .inner and then it pokes out of the div again in webkit.

6

Good on you Paul. The position:relative trick is well noted and appears to be what I was missing.

Also, you were spot on with the webkit note (I’m doing dev in chrome with side trips to FF and IE for spot checks). The issue only appears in Webkit as best I can tell (haven’t yet tested in Opera)