I can't get border-radius property work on IE8, even with PIE.
What I am trying to do ?
A progress bar
HOW ?
A parent div with round border (border-radius: 15px) and a grey background. A child div (rectangular) with green background. The child corners should be hidden outside of the parent shape (overflow:hidden).
Problem :
On IE8, the parent shape has round corners but the child div has not (You can get the same result on other browser by removing overflow: hidden)
Why this solution "Overflow:hidden for rounded borders using css3pie in IE8?" does not answer my problem ?
I don't want my child div to have round corners, for instance at 61% (see my JSFiddle), the right side of the green shape is rectangular. (I don't want to add border-radius property on it)
Code & Demo ?
JSFiddle : link
HTML :
<div class="container">
<div class="progress" style="width:61%"></div>
</div>
CSS :
.container {
width: 200px;
height: 30px;
border: solid 1px black;
position: relative;
background: #AAA;
border-radius: 15px;
behavior: url(/Content/PIE.htc);
/* REMOVE TO SEE THE RESULT ON IE8 : */
overflow:hidden;
}
.progress {
height: 100%;
background: #5F5;
}
Does anyone has an idea to deal with it ?
Related
I have an image element nested in a parent div. The parent has rounded corners and the image should adapt those. In case that the image doesn't load for some reason, a default background color should show. This is the general setup:
.parent {
border-radius: 10px;
overflow: hidden;
}
.child {
width: 100%;
height: 100%;
object-fit: cover;
background-color: red;
}
<div class="parent">
<img src="https://via.placeholder.com/150" class="child" />
</div>
I would expect the image to fill the entire container and not let any red color from the background show through, however the corners look like this:
As you can see, there is a thin red line visible at the rounded corners. This happens in Chrome and Firefox. How do I get rid of that and make the image properly fill the corners?
Bummer. You could transform: scale(1.05) as a way around it. Or put the image in the background of the parent. : /
I have a box that has following CSS:
.box{
background-clip: content-box;
background-color: #FFEA27;
border-radius: 4%;
}
And the problem is that border radius is not being calculated correctly because of the background-clip: content-box; since border-radius calculates paddings also. At the end I get results like this: https://prnt.sc/n9gxpv
Let's look at the upper right corner for example. The rounding from right line to edge and from top line to edge is not equal and thus we I don't get perfectly round edge.
Is there any workaround for this. Like setting background color of a div without using background-color. Important this to say is that I cannot switch to margins from paddings and eliminate need for backgroud-clip attribute.
I made this simple workaround to fix it:
I made another div inside the current box and set it's width and height to 100% (so it takes the width and height of original element). Than I just set background color and border radius to inner element. Here is code example.
HTML:
<div class="box">
<div class="innerBox">
</div>
</div>
CSS:
.innerBox{
width: 100%;
height: 100%;
border-radius: 2%;
background-color: #1C1C1C;
}
Instead of using % as the unit, use pixel.
.box{
background-clip: content-box;
background-color: #FFEA27;
border-radius: 4px;
}
Works perfectly.
I have an responsive container (Wordpress with visual composer) with a background color and border. If I want the background a little outside the container. (like a offset print error) How to achive this. I have dabbled with background-position. But can't get it to work in WP and dosn't seem to work with negative?
Background and border offset
You could replace border with outline, and use a negative outline-offset value.
*Note that this is not supported by Internet Explorer
div {
background: black;
outline: 5px solid yellow;
outline-offset: -10px;
width: 300px;
height: 300px;
}
<div></div>
When I blur a image it overflows the parent container, even specifying overflow to be hidden.
Is there a way to keep the blurred edges inside dimensions?
The image needs to be as css background and not inside tag
Example not working:
.box{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
.blur{
width: 100%;
height: 100%;
overflow: hidden;
-webkit-filter: blur(20px);
background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}
http://jsfiddle.net/tMjsJ/1/
It can be achieved by applying a margin to the child element and overflow:hidden to the parent.
.box {
overflow: hidden;
margin:5px;
}
.blur {
-webkit-filter: blur(20px);
margin: -5px 0 0 -5px;
background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
height:300px;
width:300px;
}
See an example here: http://jsfiddle.net/n1ck/tMjsJ/5/
As Joshua pointed out, it is the same technique as used here: Defined Edges With CSS3 Filter Blur
So, apparently, this doesn't seem to work on background images. Quite interesting find :) A similar but not exact post was demonstrated here:
Defined Edges With CSS3 Filter Blur
I would imagine that if you want to accomplish the same effect, try changing from using a div with a background image to an image itself, using width / height of 100%.
Edit: Check out #N1ck's answer. Applying a negative margin (even -1px) works seems to trigger the proper effect. Nice.
Also - to avoid the bleeding background color (white), or at least manage it better, try setting a background color in addition to the image.
I'm having a bit of trouble getting Chrome to honor the border radius on child elements.
Here's the setup:
<div class='wrapper'>
<img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' />
</div>
if the wrapper is a positioned element (e.g. position: relative) and has a border-radius, then the border radius will not be applied to the img content.
it doesn't have to be an image, either. any content that fills the background.
Here's a reduced example page that shows off the problem. View in Safari, Mobile Safari, Firefox, or IE and the corners of the image will be clipped to the round corner. Viewed in Chrome the image overflows the corner (despite the overflow:hidden css) and looks ugly.
Have a look:
https://dl.dropbox.com/u/433436/no-rounding/index.html
The question:
Is there some workaround for this that's not too insane? Does anyone know why this affects one WebKit based browser and not others? Perhaps this is coming to update in Chrome soon?
You need to remove the position: relative
If your really need position relative then you can double wrap your element:
HTML:
<div class="outer">
<div class="wrapper">
<div class="inside">
</div>
</div>
</div>
CSS:
.outer {
position: relative;
}
.wrapper {
width: 100px;
height: 100px;
overflow: hidden;
border: 3px solid red;
border-radius: 20px;
}
.inside {
width: 100px;
height: 100px;
background-color: #333;
}
http://jsfiddle.net/eprRj/
See these related questions:
Forcing child to obey parent's curved borders in CSS
CSS Border radius not trimming image on Webkit
How to make CSS3 rounded corners hide overflow in Chrome/Opera
Try giving the child elements a border-radius of half of that given to the parent element.
From this answer: https://stackoverflow.com/a/5421789/187954
Just add in
.wrapper:first-child{
border-radius:20px;
}
You will have to adjust the radius though depending on your border thickness and take this off the child.
I would also add in prefixes for the older supporting browsers -moz- etc..
Adding display: block; or display: inline-block; to the parent element could solve it.