How To Add Border To Image in HTML
Syntax
Syntax of HTML <img src="..." style= " border . . ;" > tag
<img src=". . . " style="border:10px solid peru;">
<img src=". . . " style="border:10px solid peru;">
How To Add Border To Image in HTML
Example
<!DOCTYPE html>
<html>
<h2>How To Add Border To Images in HTML </h2>
<img src="https://img.freepik.com/free-photo/long-shot-bird-lake-with
-blurred-background_23-2148245168.jpg?semt=ais_hybrid&w=740&q=80"
</body>
</html>
How To Add Border To Image in HTML
Explain Program
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
- <head> section
- head section contains metadata about page. not visible on the page itself.
- <title> tag title section set the title of the page shows the browser tab.
<body>
- Contains all visible of the webpage.
- Everything inside <body> tag visible content of the webpage.
- User will display/see their browser.
Step 4]
<h2> How To Add Border To Images in HTML </h2>
- html heading tag
- use to show heading /subheading of your content webpage.
<img src="https://img.freepik.com/free-photo/long-shot-bird-lake-with
-blurred-background_23-2148245168.jpg?semt=ais_hybrid&w=740&q=80"
style="width:200px; height:150px;border:10px solid peru;">
- HTML <img> tag :- Embeds an image in webpage.
- HTML <src="..."> tag :- Source URL/path of the image file browser
- HTML <style="..."> :- inline css styling applied directly to this <img> tag.
- HTML <width :200px;> tag :- image to display width 200px.
- HTML <height:150px;> tag :- image to display height 150px.
- HTML <border: 10px solid peru;> :- border deaws around the image
Step 5]
closing the Tag
</body>
</html>
How To Add Border To Image in HTML
Output
Related Post :-
