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:
https://codepen.io/dreamleader9/pen/erYqLp
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.
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.
1 Like