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.


@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%;
| improve this answer | |
  • Is there a way to more cleanly alter the fotorama plugin or override its styles natively? I feel like I should be declaring styles for particular modules, rather than filling up my Magento_Theme _extends.less file with page-specific styles. – Joshua Flood Dec 14 '17 at 11:32
  • I had assumed this as a last resort, but I expected that magento would handle one of their most crucial models a bit more cleanly. – Joshua Flood Dec 14 '17 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.