 <p>Got it working. Seems like <code>firefox</code> does apply <code>overflow: hidden</code> if you have rounded or cut edges but <code>webkit browsers don't</code>.</p> <p>I found a workaround for your problem - could be a little hacky but it is a solution. You can find the reference here: <a href="http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera">stackoverflow reference post</a></p> <p>Below you find the solution in action:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>@-webkit-keyframes animate { 0% { transform: translateX(-130px); } 100% { transform: translateX(230px); } } @-moz-keyframes animate { 0% { transform: translateX(-130px); } 100% { transform: translateX(230px); } } @keyframes animate { 0% { transform: translateX(-130px); } 100% { transform: translateX(230px); } } #box { background-color: tomato; width: 300px; margin-left: 50px; border-top: 10px red; border-right: 10px blue; overflow: hidden; -moz-border-radius: 50%; -webkot-border-radius: 50%; border-radius: 50%; /* this fixes the overflow:hidden in Chrome */ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } #box .b0 { display: inline-block; border: 1px dashed black; -webkit-animation: animate 2s infinite; -moz-animation: animate 2s infinite; animation: animate 2s infinite; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt; &lt;span class="b0"&gt;&lt;img src="http://png-5.findicons.com/files/icons/547/sport/128/tennis_ball.png"/&gt;&lt;/span&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>I hope I could provide what you were looking for.</p> <p>Best regards</p>