htmlcsssquarespace
Can't figure out why border-radius css isn't working properly
I'm working on a squarespace site with various convoluted divs and I can't get border-radius to work properly. I have been reading various threads with mixed replies on whether to place the border-radius property on the img or the containing div. Here's my current code on the img:
#block-yui_3_17_2_1_1613415096810_5619 img {
display: block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
}<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619"><div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
<div class="
image-block-outer-wrapper
layout-caption-below
design-layout-inline
combination-animation-none
individual-animation-none
individual-text-animation-none
" data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
<figure class="
sqs-block-image-figure
intrinsic
" style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
<div style="padding-bottom: 56.24%; overflow: hidden;" class="
image-block-wrapper
has-aspect-ratio
" data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
<noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e" data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
</div>
</figure>
</div>
</div></div>I'm a newb with css and I really have no idea where to place the border-radius property. Here is the general flow from the top level element on this item:
div > div > div > figure > div > img
Here is my Image: 
It shows up as an ellipse. I'm trying to make it a perfect circle with the image cropped to fit properly. I think maybe it's being thrown off by the image's aspect ratio.
If anyone has any ideas, I'd be very appreciative.
EDIT: here's the code of the IMG element
<img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e" data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
Solution
The Issue is, that your Image has an inline style:
<img style="left: -0.0220265%;
top: 0%;
width: 100.044%;
height: 100%;
position: absolute;">
An inline-style always has a higher priority then css-style and as such overwrites your css. Remove the height and width attribute and value and the issue will be fixed:
#block-yui_3_17_2_1_1613415096810_5619 img {
display: block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
object-position: 40% 50%;
}<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619">
<div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
<div class="
image-block-outer-wrapper
layout-caption-below
design-layout-inline
combination-animation-none
individual-animation-none
individual-text-animation-none
" data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
<figure class="
sqs-block-image-figure
intrinsic
" style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
<div style="padding-bottom: 56.24%; overflow: hidden;" class="
image-block-wrapper
has-aspect-ratio
" data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
<noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg"
data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e"
data-type="image" style="left: -0.0220265%; top: 0%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
</div>
</figure>
</div>
</div>
</div>Alternativly you can add !important to the css-style height and width value to give it the highest priority and overwrite the inline style as in the example below:
#block-yui_3_17_2_1_1613415096810_5619 img {
display: block;
width: 200px !important;
height: 200px !important;
object-fit: cover;
border-radius: 50%;
object-position: 40% 50%;
}<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619">
<div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
<div class="
image-block-outer-wrapper
layout-caption-below
design-layout-inline
combination-animation-none
individual-animation-none
individual-text-animation-none
" data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
<figure class="
sqs-block-image-figure
intrinsic
" style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
<div style="padding-bottom: 56.24%; overflow: hidden;" class="
image-block-wrapper
has-aspect-ratio
" data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
<noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg"
data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e"
data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
</div>
</figure>
</div>
</div>
</div>EDIT: Added object-position: 40% 50%; to "center" person in the image as asked at the comment section.