Border radius

Image

Result

Crop

Source Code

<select id="border-radius">
  <option value="">none</option>
  <option value="50%">50%</option>
  <option value="10% 30% / 50% 70%">10% 30% / 50% 70%</option>
  ...
</select>
<img id="image" src="/cropperjs/picture.jpg" alt="Picture">

<script src="https://unpkg.com/cropperjs@2/dist/cropper.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    const cropper = Cropper.createCropper('#image');
    const select = document.getElementById('border-radius');
    const button = document.getElementById('button');
    const result = document.getElementById('result');
    const selection = cropper.getCropperSelection();

    selection.borderRadius = select.value;
    select.addEventListener('change', function () {
      selection.borderRadius = select.value;
    });

    button.addEventListener('click', async function () {
      const croppedCanvas = await selection.$toCanvas();
      const croppedImage = document.createElement('img');

      croppedImage.src = croppedCanvas.toDataURL();
      result.replaceChildren(croppedImage);
    });
  });
</script>