Adding a border AND changing the shape of image block on hover with CSS!

Hello all! 

Just starting to learn how to use CSS... I was wondering if I could combine a code that would allow me to add a border to an image block and then change the image shape on hover along with the border.

Right now I am using 2 different codes for each (which I'm pretty sure is the issue) but when I add the code to change the image shape on hover, the border does not change and it looks weird... the image changes shape within the border... 

How can I fix the code, if anyone knows and would be so kind as to help, please 🙂

https://porcupine-lavender-c2sl.squarespace.com  (demo)

Code I'm using:

//IMAGE BORDER//

#block-ee70ddcd6eda292ef879{
border: solid 1px black;
} 

//CHANGE IMAGE ON HOVER//

#block-ee70ddcd6eda292ef879  img {
      transition: border-radius 2s ease-out;
}
#block-ee70ddcd6eda292ef879:hover img {
  border-radius: 500px;
}

Anyone who could take a look and let me know if I can fix this, I would really appreciate it! 

@tuanphan that did the trick! You are the absolute best! Thank you so much! 🥰