CODEWITHSUNDEEP
htmlcss
Organiccat
Organiccat

Reputation: 5651

Adding border on border radius image background bleed through

I'm adding a black border on images with a blue background and while doing so, it appears to add an ever so noticeable background colored outline on the INSIDE of the border when doing so. Is there a way to get rid of this? The code I'm using is simple:

border-radius: 100%;
border: 3px solid rgb(0, 0, 0);

And you can see the background color edging in by adding a radius to any image, as an example:

enter image description here

Upvotes: 10

Views: 2106

Answers (3)

stvnrynlds
stvnrynlds

Reputation: 2159

There are several ways to avoid that annoying border-radius background bleed:

Method 1: Wrapper with Background Color

Put the <img> in a wrapper element, and add padding to the wrapper, with a background color that matches the <img>'s border. This way, any antialiasing that happens on the image will take into account the background color of the wrapper, rather than the background color of the page.

Method 2: Add Background Color to Image

Add a background color to your <img> that matches the border color. It'll use the <img>'s background color instead of the page background color to do the antialiasing.

Method 3: Use Padding Instead

Don't bother with a border. Add padding to your <img> equal to the border size you want, and add a background color in the border color you want. This gets you the same effect with the least amount of code.

Here's a JSFiddle with each of these methods: https://jsfiddle.net/4zpL98au/14/

Upvotes: 6

Marc G
Marc G

Reputation: 69

There's a quite simple solution for this problemen, just by adding a background color:

background:#000;
border-radius: 100%;
border: 3px solid #000;

enter image description here

Upvotes: 1

xengravity
xengravity

Reputation: 3589

@stvnrynlds gave an interesting answer and I wanted to test this out myself with actual code.

I have created a snippet below with both versions for comparison.

.test1 - uses padding with a wrapper instead of a border

.test2 - uses border only

.test1{
  border-radius: 50%;
  width:50px;
  height: 50px;
  padding:5px;
  background:black;
}

.test1 img{
  border-radius:50%;
}

.test2 img{
  border-radius: 50%;
  border: 5px solid black;
}
<div class="test1"><img src="http://i.imgur.com/4LM6DpN.gif"/></div>
<div class="test2"><img src="http://i.imgur.com/4LM6DpN.gif"/></div>

Zooming in 500% into the browser you can see the end results:

enter image description here

Upvotes: 3

Related Questions