mPDF turning square image into a circle

Question

Is it at all possible to have an image be a circle in mPDF? Looked all over and couldn't find any clear answers.

For me this image shows up fine, except that its a square and this should make it a circle.

css

img{
    width: 150px;
    height: 150px;
    border-radius: 150px;
}

php

$inputPath = '../web_content/cool_cat.jpg';
<div class="profile_img">
    <img src="'.$inputPath.'"/>
</div>

Answer 1

Found a way to work around this by using the image as a background image instead of an element.

So within the PHP file which creates the pdf with mpdf I just made a div that can take the image path as $inputPath. Seems to work fine now.

<div class="profile_img" style="background-image: url('.$inputPath.');"></div>

.profile_img {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 120px;
    border-style: solid;
    border-color: white;
    border-width: medium;

    overflow: hidden;

    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
 }

Answer 2

Border-radius is not supported on IMG elements.

See Supported CSS in mPDF manual.

Unfortunately, this cannot be faked even with placing the image into a div which supports the border-radius element.

<div style="width: 150px;
    height: 150px;
    border-radius: 150px; 
    border: 2px solid maroon; 
    overflow: hidden;">
        <img src="assets/butterfly_ProPhoto.png" />
</div>