How to get rid squared border around image? [duplicate] - html

Question

This question already has answers here:
remove the thin line in header images in bootstrap
(2 answers)
Closed 5 years ago.
I have this image with a rounded shape, but how do I get rid of the square square edges/border?
HTML
<div id="picture">
<input type='file' id="input">
<img [src]="url" id="Image">
<label for="uploadinput" id="uploadlabel">Upload Picture</label>
CSS
#Image {
background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
border-radius: 200px;
width: 200px;
height: 200px;
background-size: 240px;
display: block;
margin: 0 auto;
outline: none;
border:none;
border-radius: none; }

Answer 1

The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. (Thanks to #Patrick Mlr for pointing it out.)
#Image {
background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
border-radius: 200px;
background-size: 240px;
display: block;
margin: 0 auto;
width:0px;
height:0px;
padding: 100px;
outline: none;
border-style: none;
border-radius: none; }
<div id="picture">
<input type='file' id="input">
<img [src]="url" id="Image">
<label for="uploadinput" id="uploadlabel">Upload Picture</label>

Answer 2

By modifying the color you can change the border width
{ border-width: 1px; border-color: rgb(160,160,255); }

Answer 3

Try removing the border on #picture:
#picture{
border:none;
}

Answer 4

Try this:
#Image {
background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
border-radius: 200px;
width: 200px;
height: 200px;
background-size: 240px;
display: block;
margin: 0 auto;
outline: none;
border:0;
border-radius: none;
}