So, I have this Javascript code, which is responsible for changing our profile picture image. So the changing part is working absolutely fine, I can upload a file, and change the image. So, when you log in, you get a default profile picture, which then you can click on a button to change your profile image. So, that particular default image, is an image with a border-radius of 25 px. So, the only problem which I'm encountering now is that, when I upload the image, it should upload and be uploaded as having a border radius of 25 pixels. But after uploading, it just uploads as a plain image without a border radius, but I want the image to be uploaded to have a border radius of 25 pixels. How could I accomplish this? Here's the code:

Javascript:

<script type="text/javascript">

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#thePFP');
const file = document.querySelector('#file');

file.addEventListener('change', function(){
  // this refers to the file
  const choosedFile = this.files[0];

if (choosedFile) {
  const reader = new FileReader();

  reader.addEventListener('load', function(){
    img.setAttribute('src', reader.result);
  });

  reader.readAsDataURL(choosedFile);
}

});

</script>

HTML:

<img class="pfp" id="thePFP" src="img/pfp.png">

<div class="profile-pic-div">
  <img src="img/cam.png" class="camera" id="camera">
  <input type="file" class="file" id="file" accept="image/*" style="cursor: pointer">
</div>

PS. The image with the class of "pfp" is the default image I was talking about, when you login, that image with class "pfp" is the default image which I mentioned.