Rounded edges/circular border

Rounded edges/circular border
0

#1

link to codepen: http://codepen.io/NerdBurglur/pen/Vmrmqj

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.


#2

Hi,

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.


#3

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.


#4

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!