CSS3 border-radius clipping issues
It's not by design, there's an outstanding defect in Firefox about this. Should work OK in any WebKit browser. In Firefox you either have to add border radius to the contained element too, or use some sort of hack.
Should border-radius clip the content?
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.
Safari Border Radius clipping issue
How about this solution? I added left: 0; and decreased width of .child. If you need to change its size just change width instead of left position.
.parent {
width:200px;
height:30px;
border-radius:15px;
overflow:hidden;
position:relative;
border:1px solid black;
}
.child {
width:70px;
height:30px;
border-radius:15px;
position:absolute;
left:0px;
background:red;
}
jsfiddle
border-radius fails under safari (ugly clipping)
That's most likely due to background clipping.
The following should correct that.
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
For some more on background-clip, have a look here:
https://developer.mozilla.org/en/CSS/background-clip
Border-radius rendering bug when in overflow: hidden
A dimensions-dependent solution...but maybe that's OK since it's a menu bar not a content holder? Anyway, you can set border-radius
on your inner elements, give the parent a height, and also use that height value for the line-height
of the inner elements.
Once you apply the height/line-height, you don't have to use overflow: hidden
.
Since your menu bar has a border radius of 3px
, apply the same rounding to the appropriate corners of the first menu item like so:
.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }
And make the corresponding corners of the bar even more rounded, to hide them beneath the first menu item:
.outer { border-radius: 10px 3px 3px 10px; }
http://dabblet.com/gist/3828755
Related Topics
How to Have Two Fixed Width Columns With One Flexible Column in the Center
How to Create Links With 'Target="_Blank"' in Markdown
Javaserver Faces 2.2 and Html5 Support, Why Is Xhtml Still Being Used
Float Does Not Work in a Flex Container
Why Should I Use 'Li' Instead of 'Div'
Scale Image to Fit a Bounding Box
Transform: Translate(-50%, -50%)
Prevent Scroll-Bar from Adding-Up to the Width of Page on Chrome
How to Style a Mouseover on an Image Map Using CSS
Using Display Inline-Block Columns Move Down
Best Way to Include Css? Why Use @Import
How to Install a Custom Font on an HTML Site
Css Set Background-Image by Data-Image Attr
How to Specify a Local File Within HTML Using the File: Scheme
Why Doesn't "Margin: Auto" Center an Element Vertically