2

Is it possible to use border-radius on a div (in Chrome and Opera) so that the inner div background would also be affected? If not, how else can this effect be achieved?

Example: http://jsfiddle.net/fE58b/1/

It works well in IE9 & FF7.

Thank you.

Key-Six
  • 2,439
  • 2
  • 26
  • 22
  • 1
    Have you tried applying the border-radius to the inner div as well? – Will Jun 19 '12 at 22:21
  • Of course, but it would work only if the sizes were the same, but that's not this case. – Key-Six Jun 19 '12 at 22:25
  • I know you didn't ask about Safari, which is also Webkit like Chrome, but I'm noticing that `border-radius` starts working when you convert `20%` into pixels. – Sparky Jun 19 '12 at 22:38
  • @Sparky672: I've just installed Safari to try it out, but it doesn't work for me. – Key-Six Jun 19 '12 at 22:50
  • It's not a complete solution. When it's set to `20%` I see square corners on everything. When it's set to `20px` I see rounded corners on the `div` but the image is still not cropped. – Sparky Jun 19 '12 at 22:53

3 Answers3

0

It works if you just move the background image from #content to .box:

.box {
     background:url(...so_70s_background.jpg) top left repeat;
}

Also if you really need to have the borders in a separate div, you can always add new divs outside the box:

<div class="box-outer">
    <div class="box">
        <div id="content"></div>
    </div>
</div>

Just make sure to apply:

.box-outer {
    width:500px;
    height:500px;
    position:absolute;
}
jsalonen
  • 29,593
  • 15
  • 91
  • 109
  • Makes no difference in Safari. – Sparky Jun 19 '12 at 22:21
  • I forgot to mention, that the background has to be in a separate div. Sorry, my mistake. – Key-Six Jun 19 '12 at 22:22
  • You mean in a separate div from the borders? Also why? – jsalonen Jun 19 '12 at 22:23
  • @Sparky672: He didn't mention Safari support was required. – jsalonen Jun 19 '12 at 22:23
  • @jsalonen: Yes, exactly. Because I'm using a jquery plugin to generate the background. It has to be in an inner div for the plugin to work. – Key-Six Jun 19 '12 at 22:35
  • @Drejon: Do you really need to put the borders into exactly that div? I don't see a reason why you still couldn't like add something like `
    ` as a placeholder for the plugin and append the borders inside this element.     – jsalonen Jun 19 '12 at 22:38
  • @jsalonen: Could you please provide an example? – Key-Six Jun 19 '12 at 22:41
  • Weirdly, this answer is working fine in Safari when `20%` is changed to `20px`. See http://jsfiddle.net/fE58b/14/ – Sparky Jun 19 '12 at 22:54
  • What is your OS and browser versions? It works both with `20%` and `20px` on all of my browsers (Safari 5.1.4, Opera 12.00, Chrome 19.0.1084.56 m; Windows 7). – jsalonen Jun 19 '12 at 22:57
  • @jsalonen: I've tried it, but it's not working - the plugin affects the wrong div. And even if it would work, the issue still remains (the content is not affected): http://jsfiddle.net/fE58b/15/ – Key-Six Jun 19 '12 at 23:01
  • Does it break even if you rename `.box-outer` to `.box` and `.box` to `.box-inner`? – jsalonen Jun 19 '12 at 23:02
  • The `%` versus `px` thing is clearly a browser issue as a change in units should make no difference. Safari 4.1.3. And to the OP, if the code is working in a jsFiddle, then it should also work for you if you've applied it correctly. – Sparky Jun 19 '12 at 23:07
  • @jsalonen: Yep, it does. It won't make a difference, because the background is in the same div as the border-radius. The plugin also rotates the div, in which the background is located - I need to avoid that. – Key-Six Jun 19 '12 at 23:09
  • Oh right, got that. However, as has been demonstrated, browsers don't support use of `border-radius` along with `overflow: hidden` in the same `div` very well. – jsalonen Jun 19 '12 at 23:12
  • So there probably isn't even an alternate solution for this kind of problem, is there? – Key-Six Jun 19 '12 at 23:19
0

So, as Cristi stated above, some browsers seem to have a little trouble with clipping overflowing children along the curved border of their parents. It appears that, in order (for at least Webkit) to render child overflow affected by parent border-radius, both parent and child must be statically positioned.

Furthermore, even with this static positioning, it appears that setting an opacity value for the child element will cause it to break the overflow boundaries of its parent (if I had to guess, I'd imagine this has something to do with the opacity value triggering hardware accelerated graphics, in which case a 3D-transform will produce the same glitch).

Luckily, you can use an absolutely-positioned grandparent control the dimensions and position of its static children, and rgba on background and text to simulate element opacity. I just so happen to have a jsfiddle snippet demonstrating some of these workarounds which you might find helpful.

Aaron
  • 5,137
  • 1
  • 18
  • 20
  • I've set the opacity only to demonstrate the border-radius overflow. What do you mean with 'statically positioned'? – Key-Six Jun 19 '12 at 23:47
  • Never used that one before, but it doesn't seem to be working. – Key-Six Jun 19 '12 at 23:59
  • I've created an updated of your JSFiddle that has been tested in Chrome, Safari and Opera, and works in the first two. http://jsfiddle.net/fE58b/16/ (notice the removal of the opacity attribute in favor of a semi-transparent background image). I'm honestly not sure what the deal is with Opera. As far as I can tell, the only way to make Presto render the elements as expected is to apply a border-radius to the inner div as well as its container. – Aaron Jun 20 '12 at 02:01
0

user following to solve border radous issue

         border-radius: 20%;        /* FOR ALL NEW BROWSER OF HIGHER VERSION*/
    -webkit-border-radius: 20%;      *FOR ALL OHTER OLD BROWSER*/
    -moz-border-radius: 20%;     /* FOR MOZILLA FF*/
vivek salve
  • 991
  • 1
  • 9
  • 20