Magento 2: Add border-radius to image on product page

Question

Magento 2.2.1 using a custom theme which inherets from Magento/blank.

I would like to add a border-radius to the main image on the product page.

I have tried applying border-radius to parent containers without success, but the image itself is loaded with fotorama and I'm not sure how to cleanly alter the styles for this.

Answer 1

@JoshuaFlood first you need to inspect the image tag on your browser to get the right image class, then you can style it like this:

.fotorama__stage__frame .fotorama__img{
  border-radius: 50%;
}