html - Trimming image corners with border-radius set on parent div doesn't work in Safari -


i have image placed inside div, div has rounded corners works mask hide image corners , display circle. works in browser except safari! knows how fix it?

i tried -webkit-padding-box, -webkit-mask-box-image both didn't work.

html:

<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div> 

css:

.cat{     width: 128px;     height: 128px;     margin: 20px 96px 0px 96px;     position: relative;     float: left;     border-radius: 50%;     overflow: hidden;     border-top: 1px solid #111;     border-bottom: 1px solid #fff;     background: #fff;     -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);     box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); }  .cat img{     position: absolute;     border: none;     width: 138px;     height: 138px;     top: -8px;     left: -8px;     cursor: pointer; } 

fiddle

the best way around specifying overflow: hidden; on parent element.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -