1

I was originally faced with this common problem...

stackoverflow.com/css-border-radius-not-trimming-image-on-webkit

So I followed the fiddle from the question above and solved that issue.

But then I wanted to animate a div inside of this mark-up when hovered, so I added this css and jquery...

But now when I hover this element, the animation takes place and I lose all border radius!

Aaaagghhh! Why does this happen!??

See it happen in action http://jsfiddle.net/USd5s/439/


<span class="outer">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</span>

\

span.outer{
    position:relative;
    width: 100px;
    height: 100px;
    display: block;
    cursor: pointer;
    float: left;
    margin: 15px
}

div.outer {   
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-border-radius: 6px;
}

.inner {
    background:red;
    height:100px;
    width:300px;
    position: relative;
    background: #e6f0a3;
}

\

$("span.outer").hover(function() {
    $(this).find('.inner').animate({
        left: '-200px'
    }, 100, function() {
        // Animation complete.
    });
}, function() {
    $(this).find('.inner').animate({
        left: '0'
    }, 100, function() {
        // Animation complete.
    });
});
Community
  • 1
  • 1
Joshc
  • 3,825
  • 16
  • 79
  • 121

1 Answers1

2

You forgot to add a border to your outer div!

div.outer {   
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-border-radius: 6px;
    border: white 2px solid;
}

Am I right?

Demo: forked fiddle

clement g
  • 461
  • 1
  • 3
  • 10
  • No does not work. Just the borders are rounded and not the actual square. Try looking in safari – Joshc Jan 22 '13 at 16:31