My friend 'circles' are actually squares!

I’m not getting circles, they are squares. Yet, it’s being accepted and allowing me to continue with the lessons. I’m not sure why this is.

-> How to insert code into a post <-


Paste your code, Certainly a problem to border-raduis !

Backticks are changing the squares to elongate rectangles and placing them on top of each other in list form. UGH!!!

div {
	display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border: 2px solid black;
	border-radius: 100%
	
}
div.friend{
    border-radius: 2px;
    border-style:dashed;
    border-color: #008000;
}
div.family{
    border-radius: 2px;
    border-style: dashed;
    border-color: #0000FF
}
div.enemy{
    border-radius: 2px;
    border-style: dashed;
    border-color: #FF0000;

}
#best_friend{
    border-radius: 4px;
    border-style: solid;
    border-color: #00C957;
}
#archnemesis{
    border-radius: 4px;
    border-style: solid;
    border-color: #CC0000;
}

You can just copy paste your css code to the forum without using the backticks?

Posted above your comment…we overlapped each other!

even adding those missing semi-colons, which was accepted as well, it doesn’t change the squares to circles.

I also see what is causing the the problem. in div.friend, div.family, div.enemy, #best_friend and #archnemesis, you use border-radius, which will overwrite your border-radius you defined in div. However, in friends and so on, you want to use border-width (which determines the thickness of the border) rather then border-radius (which will make the corners round, or if a high enough value is used, circles)

Okay, now the div.enemy is staying a square while the others switched to circles.
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border: 2px solid black;
border-radius: 100%;

}
div.friend{
border-width: 2px;
border-style:dashed;
border-color: #008000;
}
div.family{
border-width: 2px;
border-style: dashed;
border-color: #0000FF;
}
div.enemy{
border-radius: 2px;
border-style: dashed;
border-color: #FF0000;

}
#best_friend{
border-width: 4px;
border-style: solid;
border-color: #00C957;
}
#archnemesis{
border-width: 4px;
border-style: solid;
border-color: #CC0000;
}

your enemy still has a border-radius, rather then a border-width

Oh yeah, duh!! THANK YOU. Now I have to figure out how to center the names. I saw another thread with all of that so I’ll go read it!

horizontal align is easy, just add text-align: center to your div css selector.

Vertically is a bit more tricky, there are multiply ways to achieve this, go read the other thread you found

thank you so much!! The names are centered on the top of the circle now so that’s a start! And hey…I have circles!! THANK YOU! I’m LOVING this course!

You could take a peak at exercise 1 of sorting friends, they use paragraphs to center the text vertical, or you can check out this guide, which covers a lot of centering techniques