Can I use "border" as property inside <img>?

I have used border="2px solid black" inside <img src=" "> to give a border around the image, but it doesn't working.

11th Feb 2020, 9:16 AM

RH Tasin

9 Answers

+ 1

Yes I noticed that you mentioned "solid", so I just edited my answer to include a link to border-style documentation too. Next time if you meet this question, you can search in Google with query string : "solid CSS", there you can see w3schools and Mozilla Doc, both are good references. w3 is easier, MDN goes deeper with compatibility. Here is border-style on w3schools, it is easier: https://www.w3schools.com/css/css_border.asp One more good site is csstricks, it teaches you how to do cool things. https://css-tricks.com/almanac/properties/b/border/ For this topic, it is too simple, so not cool. If it is media query, CSS tricks gives full list of device width for practical development.

11th Feb 2020, 3:35 PM

Gordon

+ 4

should be : not = Use CSS img { your css scripts. } https://www.sololearn.com/learn/CSS/1080/

11th Feb 2020, 9:18 AM

Gordon

+ 3

Tasin R Hasan Do not use properties of element in html to specify css styles. The good practice is always use css selector, like Gordon mentioned.

11th Feb 2020, 10:20 AM

Calviղ

+ 2

Tasin R Hasan Thanks for including your code. You are doing well in using <style> to include CSS. For border-color, it is for color only. You need to use along with border-style and border-width. For a border to be visible. Example : https://code.sololearn.com/W9VWGmzhfn34/?ref=app MDN doc : https://developer.mozilla.org/en-US/docs/Web/CSS/border-color For border, it is the new shorthand property. Meaning one property in replacement of three properties. It saves our time from typing so many property names. Similar to border, we have animation, which is also a shorthand property. MDN doc : https://developer.mozilla.org/en-US/docs/Web/CSS/border I also noticed you mentioned "solid", for border-style, apart from solid, you can use double, dashed, etc. You can look up border-style documentation and try them one by one. MDN doc : https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

11th Feb 2020, 3:18 PM

Gordon

Gordon Visual Stdio has given me an option "border-color" I used that and it didnt work. Then I used "border" after that it work. why is that? what do "border-color" do then? And also I have to use "solid" word before the color name, otherwise it is not working. why only color name doesn't work?

11th Feb 2020, 9:26 AM

RH Tasin

`Visual Stdio has given me an option "border-color" I used that and it didnt work. ` 👈 Can you provide your snippet for this one so we can examine? Post in this way: https://www.sololearn.com/post/75089/?ref=app

11th Feb 2020, 2:23 PM

Gordon

Martin Taylor Run this code. only "border" is working while "border-color" is not working. Gordon Gordon Here it is brother. Replace "border-color" with "border" it will not work. I wanna know why. And also remove "solid" word then it also not work. I also wanna know why. https://code.sololearn.com/Wo4pQbslCb9v/?ref=app

11th Feb 2020, 3:07 PM

RH Tasin

Gordon Thank you very much. It was helpful. can you tell me some more value like "solid" in this case?

11th Feb 2020, 3:25 PM

RH Tasin

put <style> img{border:2px solid black;} </style> </head> <body> <img src="path/image.jpg" width="80px" height="80px" alt="NoImage"> </body> </html>

11th Feb 2020, 6:18 PM

Ahmed Serageldin Moustafa