Reanimation Reanimation - 14 days ago 7
CSS Question

Chamfer / Fillet Image HTML

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:

enter image description here

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

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>