Rounded edges/circular border

Rounded edges/circular border


link to codepen:

I feel guilty asking so many questions but closed mouths dont get fed so here we go…

Id like to know if its possible to put a rounded edge/circular border around a background image. Id like the url image at the bottom that says “always” to be a circle shape and then continue on with its function of rotating and fading out to show the next image(already got that part)… i know how to put a border on a lone image… and tried to apply that in this case but with no success.



I’ve added the following (on top of your existing CSS) to make this work.

.rotate {
border-radius: 50%;
width: 400px; /* Border radius requires same value for height and width to make it a perfect circle /
background-size: cover; /
Required so that image stays within the border */

.rotate:hover {
border-radius: 0; /* Removes border-radius on hover */

Hope that helps.


thank you for the help! It looks good but when it rotates to the 2nd background image, its cut off on the sides. I was looking for the effect on the first image only. You gave me most of it… ill get the rest! Much obliged.


Going off of the notes you left about the width of the border radius needing to be adjusted to make a perfect circle…i enlarged it to 500 px on line 66 as well as the height of the image on line 38… I got just what i was looking for. Thanks again!