JSFiddle - React, Tailwind, and code Playground

by mrmartineau

HTML

<p>This should work in most other browsers</p>
<div id="number1">
    <img src="http://koreaneye.neverbland.com/filestorage/cities/1/artworks/20MB_37-(21)s/650_0_resize_80.jpg">
</div>
<p>This should only work in Firefox</p>
<div id="number2">
    <img src="http://koreaneye.neverbland.com/filestorage/cities/1/artworks/20MB_37-(21)s/650_0_resize_80.jpg">
</div>

CSS

div {
    width:200px;
    height: 200px;    
    overflow:hidden;
}
#number1 img {
    border:1px solid #000;
-webkit-border-radius: 20px 150px 150px 150px;
 -khtml-border-radius: 20px 150px 150px 150px;
   -moz-border-radius: 20px 150px 150px 150px;
        border-radius: 20px 150px 150px 150px;
-webkit-background-clip: padding-box;
        background-clip: padding-box;
}
img {
    width:100%;
    display:block;
}
#number2 {
    border:1px solid #000;
-webkit-border-radius: 20px 150px 150px 150px;
 -khtml-border-radius: 20px 150px 150px 150px;
   -moz-border-radius: 20px 150px 150px 150px;
        border-radius: 20px 150px 150px 150px;
    width:300px;
    height: 300px;
}