How To Add Border To Image in HTML
This Blog You Will Learn
ஃ What is the Add Border Image?
ஃ why add a border to an Image.
ஃ How Borders Work in CSS
ஃ Syntax
ஃ Summary
ஃ Explain Program
ஃ Output
What is the Add Border Image?
1] The CSS Border property is utilized to create a border around HTML elements such as images, divs,inputs, and buttons.
2] The border serves to emphasize elements and enhances the visual design of a webpage.
3] The border property is a shorthand that consolidates three individual properties.
4] To add a border around HTML elements on your webpage, use this property.
5] A border image can give a more framed appearance or seamlessly integrate with your webpage design
why add a border to an Image.
✅Improve design and layout for web page.
✅ addd creative effects like dashed or colored frames.
✅separate it visually surroundig text.
✅ image and highlight.
How Borders Work in CSS
CSS Border property
Add border to image,you use CSS border property.
Three main part
1) Border style
2) Border color
3) Border width
Syntax
Syntax of HTML <img src="..." style= " border . . ;" > tag
<img src=". . . " style="border:10px solid peru;">
<img src=". . . " style="border:10px solid peru;">
Summary
✔ Adding Border to an image in HTML is a great way to enhance your page's design.
✔ The recommended approach is to use css.
✔ Use the border property for thickness style and color
✔ Apply style with css classes for reuse.
✔ Add visual boundaries to elements.
How To Add Border To Image in HTML
Example
<!DOCTYPE html>
<html>
<head> HTML Image border tag</head>
<body>
<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"
style="width:200px; height:150px;border:10px solid peru;">
</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>
<title> HTML Image border tag </title>
- <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 :-
