On my website [howtoplaystation.com], the images of the popular posts on the right side are too small, blurred and surrounded by black borders. Can someone help me fix this?

I tried some CSS codes, but didn't help.

I'm looking for css code that removes the black borders, blurring and makes the images bigger.

.PopularPosts .item-thumbnail {
width: initial;
height: 70px;
}
.PopularPosts ul li img{
object-fit: fill!important;
}
I tried this code, but didn't seem to fix the problem

Thank you in advance.

Well, if you want them to display a different size, then change the

.PopularPosts .item-thumbnail img {...}

rule that sets the images to 60x60.

Yeah, change or remove is what your want rather than add to the CSS.

Anyway, I don't see any black border. Fixed it already?

Thank you! But what do I have to write between the brackets?

No, still didn't fix it. See attachment:
Click to view attachment

I don't see a black border in your screen cap either. Do you mean WHITE border? Or maybe the faint shadow?

No, I mean the black background behind the thumbnails.

You need to find the existing CSS rule, and change the height and width properties to whatever it is you want them to be.

You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image.

https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu

I can crop the image with Photoshop, but how can I change it in the HTML?

If you're using Photoshop, then you can create real thumbnail images and use them, rather than resizing large image into dumbnails.

Thank you. I'm using Blogger. This is the HTML code of that widget:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>3</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>


What do I have to change? Thank you in advance.

That's mostly Blogger's proprietary template language.

There is a CSS property called clip. Only it's deprecated now, but I think browsers still support it, those that did before. I never played around with it much, but if you google "CSS clip" I think you'll find enough to understand how it works.

https://drafts.fxtf.org/css-masking-1/#propdef-clip

I'd just fix the images though.

Here I would do as pandy suggests, just fix the images and you'll be fine.