EN
CSS - remove double / duplicated border from image element
1 answers
9 points
Any one knows, how to remove duplicated border from img element. It looks like the image element has set border 2 times (2px border width when I set only 1px).
Screenshot:
Code:
xxxxxxxxxx1
2
<html>3
<body>4
<style>5
6
img {7
border: 1px solid silver;8
width: 100px;9
height: 100px;10
}11
12
</style>13
<img />14
</body>15
</html>
1 answer
6 points
Web browser displays 2px border, because your image src attribute is not set.
To fix it, you can set 1x1 px transparent image as default src value - change it to desired image URL when URL will be available.
1x1 px transparent GIF image as Base64 Data URL is:
xxxxxxxxxx1
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==So, the solution is:
xxxxxxxxxx1
2
<html>3
<body>4
<style>5
6
img {7
border: 1px solid silver;8
width: 100px;9
height: 100px;10
}11
12
</style>13
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />14
</body>15
</html>References
0 commentsShow commentsAdd comment
