Adding Border On Border Radius Image Background Bleed Through
Solution 1:
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/
Solution 2:
@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;
}
.test1img{
border-radius:50%;
}
.test2img{
border-radius: 50%;
border: 5px solid black;
}
<divclass="test1"><imgsrc="http://i.imgur.com/4LM6DpN.gif"/></div><divclass="test2"><imgsrc="http://i.imgur.com/4LM6DpN.gif"/></div>
Zooming in 500% into the browser you can see the end results:
Solution 3:
There's a quite simple solution for this problemen, just by adding a background color:
background:#000;
border-radius: 100%;
border: 3px solid #000;
Post a Comment for "Adding Border On Border Radius Image Background Bleed Through"