How to fix border gap with border-radius?

Question

I am having an issue with a circular border leaving a minor gap between the <img> and the border. This error happens with Chrome, Safari, and Firefox that I've tested. It does not happen when border-radius is 0.

In the second image you can see a small gap between the image and the border. How can I fix this?

The relevant css is:

border-radius:100px;
border:6px solid #202020;

The css is on the img tag as a style attribute. The answer in this question did not work.

Here is a fiddle reproducing the problem https://jsfiddle.net/8r8zcjvh/2/

I am unable to find the issue in the fiddle - Using Windows 10 Chrome latest. [**This is what I see**](https://i.imgur.com/HAO150W.png)... [**A better version of the image**](https://i.stack.imgur.com/o6v5k.png)... — Praveen Kumar Purushothaman, Mar 29 '18 at 08:41
@PraveenKumar there is clearly a tiny red colored gap between the image and a border — aMJay, Mar 29 '18 at 08:45
you repeat the same question got closed 30min ago ... edit the other question or call the one how close it to reopen if you are not ok — Temani Afif, Mar 29 '18 at 08:49

score 5 · Accepted Answer · answered Mar 29 '18 at 08:45

5

Add a background with the same color:

<div style="background:red">
<img src="https://pbs.twimg.com/profile_images/949374088249671680/MuxDEZpD_400x400.jpg" style="border-radius:400px;border:4px solid darkblue; background: darkblue;">
</div>

answered Mar 29 '18 at 08:45

Bruno Sousa

480
3
12

This worked thank you. – Milo Mar 29 '18 at 09:00

How to fix border gap with border-radius?

1 Answers1