Chamfer / Fillet Image HTML - html

Question

I have an image and I'm looking at basic customisation for a small website I'm creating in HTML.
I understand you can chamfer an image, as seen on this question here, that gives a 45Degree cut.
I'm hoping for a more rounded Chamfer on each corner? (I believe it's called a Fillet but I'm not 100% sure of the correct terminology.
As seen in the second picture:
Using border-radius: 16px 16px 16px 16px; works by putting it in the img class, but I don't want all images affected.
What do I need to do to allow only select images to be chamfered?
I tried this, but it didn't work:
.img-chamfer {
border-radius: 16px 16px 16px 16px;
}
<div class="img-chamfer">
<img src="Test.png" >
</div>
My exact code can be found here: https://jsfiddle.net/netazv40/
.main {
color:#29abe2;
text-align: center
}
.img-wrapper {
display: inline-block;
}
.img-wrapperPadding {
display: block;
margin: 0 auto 32px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
<div class="main">
<div class="img-wrapper">
<div class="img-wrapperPadding">
<img src="http://placehold.it/350x208" width="350" height="208"><br/>
<img src="http://placehold.it/100x50" width="100" height="50">
</div>
</div>
<div class="img-wrapper">
<div class="img-wrapperPadding">
<img src="http://placehold.it/350x208" width="350" height="208"><br/>
<img src="http://placehold.it/100x50" width="100" height="50">
</div>
</div>
</div>
I only need the larger image to be affected/chamfered.

Answer 1

solution after providing your fiddle
You can use the following CSS rule:
.img-wrapperPadding img[width="350"] {
border-radius:16px;
}
Demo: https://jsfiddle.net/netazv40/3/
... or add a class to your image and solve it like the following:
.rborder {
border-radius:16px;
}
<img class="rborder" src="http://placehold.it/100x100"/>
Demo: https://jsfiddle.net/netazv40/1/
solution #1 (using flexbox):
.img-chamfer {
border-radius:16px;
display:inline-flex;
overflow:hidden;
}
<div class="img-chamfer">
<img src="http://placehold.it/100x100">
</div>
solution #2 (using inline-block):
.img-chamfer {
border-radius:16px;
display :inline-block;
overflow:hidden;
font-size:0;
}
<div class="img-chamfer">
<img src="http://placehold.it/100x100">
</div>

Answer 2

You can use border-radius like,
div {
border: 3px solid;
border-radius: 30px;
}