homerboy homerboy - 2 months ago 11
CSS Question

border-radius: 50% for rounded image crossed out in console

I'm following standard procedures for creating a round image in ReactJS.

.about-profile {
display: block;
width: 260px;
height: 260px;
border-radius: 50%;
}

<img className="about-profile" src="./images/profile.jpg"/>


enter image description here

Why is
border-radius: 50%
not being applied in this case?

Answer

That's the cascade in CSS in effect. Some other rule is overriding your border radius.

For more details see https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

What you can do is either change .about-profile to be more "specific", or use !important to override the other rules. I suggest the former.

Comments