Remove inside image border with css [closed] - image

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to remove this border inside image with css anyone can help me to solve this.
the image border is object.
example given below:
Thanks..!

Answer 1

you can use clip-path on modern browsers so you wouldn't need to add a wrapper and set the size of the image
Example: http://codepen.io/anon/pen/Gpoamy
img {
-webkit-clip-path: inset(1px 1px 1px 1px);
clip-path: inset(1px 1px 1px 1px)
}
On older browsers (and IE) you could just use clip (although this requires to specify the size of the rectangle and an absolute position)
Otherwise another approach, with a wider support across browsers, might uses an outline (with the same colour of the background) and a negative outline-offset — actually you're overlapping the black border with another one. (tested both on Chrome and Firefox).
Example: http://codepen.io/anon/pen/PPZvKe
img {
outline: 1px #fff solid;
outline-offset: -1px;
}
Of course these examples work when the border width included inside the image is exactly 1px. If your image has a thicker border then change all the values according to the thickness

Answer 2

Although I recommend using an image editor to remove the borders, there is a CSS hack for this:
Negative margins:
Wrap the image inside a container and set overflow: hidden after
defining the dimensions(width and height). Make sure the dimensions are slightly less than the image dimensions.
Set negative margins for the image inside. The margin value is relative to the size of the border.
.borderless-img {
width: 118px;
height: 58px;
overflow: hidden;
}
.borderless-img img {
margin: -1px 0 0 -1px;
}
<div class="borderless-img">
<img src="http://i.stack.imgur.com/dcnpS.jpg" />
</div>
Scaling image:
This method will increase the size of the image, might distort it to a very little extent. It works well for your solution since it would remove the small border.
Cons: Not recommended to hide big part of images.
.borderless-img {
width: 118px;
height: 58px;
overflow: hidden;
}
.borderless-img img {
transform: scale(1.055);
}
<div class="borderless-img">
<img src="http://i.stack.imgur.com/dcnpS.jpg" />
</div>