Hi all,
Why are my borders not rounding in #image? I have tried different values other than 8%, eg, 50%, 20%. The corners are just doing nothing. Help!

Your code so far

#img-div {
  margin-top: 20px;
  padding: 20px 20px;

#image {
  border-radius: 8px;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:


I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


Can you link to your actual project?


We can’t help you. We need the link of the project first.


I have now added a link to the Codepen project in post #1 above. Next time I will use backticks - this is my first time posting. :slight_smile:


The image is not loading for me.

Your problem is that you are setting a border-radius to the parent div instead of the actual image.


Aaah! Of course, thanks for your help! You are right, I did confuse the #image div for the actual img. It makes sense now. I appreciate your help figuring this out.