EZ

EZNotes

🖼️ Practical 73: Adding border around an image in a webpage

Learn how to add borders to images using the border attribute and CSS border property with different styles, colors, and widths.

🎯 Aim

To create an HTML webpage that demonstrates how to add borders around images using the border attribute and CSS border property with different styles, colors, and widths.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • An image file

📖 Introduction

There are two ways to add borders to images in HTML:

  • Using the border attribute in the <img> tag (deprecated but still works).
  • Using CSS border property (recommended modern method).
⚠️ Important: The border attribute in the <img> tag is deprecated in HTML5. Use CSS for modern web development. However, both methods are covered here for learning purposes.
💡 Tip: CSS gives you more control with properties like border-style, border-color, border-width, and border-radius for rounded corners.

📊 Preview of the Output

🖼️ Adding Borders to Images

📐 Border Styles
solid
solid
dashed
dashed
dotted
dotted
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
🎨 Border Colors & Widths
Red Border

border: 3px solid red;

Blue Dashed

border: 5px dashed blue;

Green Double

border: 8px double green;

Yellow Dotted

border: 4px dotted yellow;

🔲 Rounded Borders (border-radius)
border-radius: 10px
border-radius: 50%
border-radius: 20px 0

📝 Step‑by‑Step: Creating the HTML Page

Method 1: Using the border Attribute (Deprecated)

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following code:
<!-- Method 1: Using border attribute (deprecated) --> <html> <head> <title>Image Border - Attribute</title> </head> <body> <h1>Image with Border Attribute</h1> <!-- Using border attribute (value is the thickness in pixels) --> <img src="sample.jpg" alt="Sample image" border="5"> <p>This image has a border using the border attribute.</p> </body> </html>

Method 2: Using CSS (Recommended Modern Method)

  1. In Notepad++, write the following code:
<!-- Method 2: Using CSS border property (recommended) --> <html> <head> <title>Image Border - CSS</title> <style> /* Different border styles */ .border-solid { border: 4px solid #e74c3c; } .border-dashed { border: 4px dashed #3498db; } .border-dotted { border: 4px dotted #f39c12; } .border-double { border: 6px double #2ecc71; } .border-rounded { border: 4px solid #9b59b6; border-radius: 15px; } .border-circle { border: 4px solid #e67e22; border-radius: 50%; width: 150px; height: 150px; object-fit: cover; } </style> </head> <body> <h1>Image Borders using CSS</h1> <!-- Different border styles --> <h2>Solid Border</h2> <img src="sample.jpg" alt="Solid border" class="border-solid" width="200"> <h2>Dashed Border</h2> <img src="sample.jpg" alt="Dashed border" class="border-dashed" width="200"> <h2>Dotted Border</h2> <img src="sample.jpg" alt="Dotted border" class="border-dotted" width="200"> <h2>Double Border</h2> <img src="sample.jpg" alt="Double border" class="border-double" width="200"> <h2>Rounded Border</h2> <img src="sample.jpg" alt="Rounded border" class="border-rounded" width="200"> <h2>Circle Border</h2> <img src="sample.jpg" alt="Circle border" class="border-circle"> </body> </html>

Step 2: Save the File

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location (e.g., Desktop).
  3. Name the file: "image_border.html" or "practical73.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the image_border.html file.
  3. It will open in your default web browser.
  4. You will see images with different border styles.

📊 CSS Border Properties

Property Purpose Example
border Shorthand for all border properties border: 3px solid red;
border-width Sets the thickness of the border border-width: 5px;
border-style Sets the style of the border border-style: dashed;
border-color Sets the color of the border border-color: #3498db;
border-radius Creates rounded corners border-radius: 10px;
border-top Sets border on top side only border-top: 3px solid red;
border-bottom Sets border on bottom side only border-bottom: 3px solid blue;
border-left Sets border on left side only border-left: 3px solid green;
border-right Sets border on right side only border-right: 3px solid orange;

📊 Border Styles

Style Value Description Preview
solid Single solid line
dashed Dashed line
dotted Dotted line
double Double solid line
groove 3D grooved effect
ridge 3D ridged effect
inset 3D inset effect
outset 3D outset effect

📊 Using border-radius

<!-- Different border-radius values --> <!-- Rounded corners (all sides) --> <img src="image.jpg" style="border: 3px solid red; border-radius: 10px;"> <!-- Different radii for each corner --> <img src="image.jpg" style="border: 3px solid blue; border-radius: 10px 20px 30px 40px;"> <!-- Circle (perfect round) --> <img src="image.jpg" style="border: 3px solid green; border-radius: 50%; width: 150px; height: 150px; object-fit: cover;"> <!-- Oval --> <img src="image.jpg" style="border: 3px solid purple; border-radius: 50%; width: 200px; height: 120px; object-fit: cover;">

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using border attribute in HTML5 Deprecated Use CSS border property
Forgetting border-style in shorthand Border won't appear Always include style: border: 3px solid red;
Incorrect spelling of border-radius Property won't work Use correct spelling: border-radius
Missing unit (px, em, etc.) Invalid value Always include unit: 10px
Confusing border with outline Different properties Use border for borders, outline for outlines

📊 Observations

  • The border attribute in the <img> tag is deprecated in HTML5.
  • CSS provides more control with border-style, border-color, border-width, and border-radius.
  • border-radius creates rounded corners, with 50% creating a perfect circle.
  • You can set different borders on each side using border-top, border-bottom, border-left, and border-right.
  • Combining border with other CSS properties like box-shadow creates more visual effects.
  • Always use CSS for styling images in modern web development.

✅ Result

You have successfully:

  • Added borders around images using both the deprecated attribute method and the modern CSS method.
  • Used different border styles (solid, dashed, dotted, double, groove, ridge, inset, outset).
  • Used border-radius for rounded corners.
  • Viewed the results in a browser.
📌 Important: Always use CSS for borders in modern web development. It gives you more control and is the standard practice. Use border: width style color; shorthand for clean, concise code. Use border-radius for rounded corners and circular images.
💡 Next Steps: Try combining borders with box-shadow for 3D effects. Experiment with gradient borders using border-image. Create a photo gallery with different border styles for each image. Learn about outline as an alternative to border!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو border صفت اور CSS border پراپرٹی کا استعمال کرتے ہوئے تصویر کے ارد گرد بارڈر شامل کرنے کا طریقہ مختلف اسٹائلز، رنگوں، اور چوڑائیوں کے ساتھ ظاہر کرتا ہے۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • ایک تصویری فائل

📖 تعارف

HTML میں تصاویر کے ارد گرد بارڈر شامل کرنے کے دو طریقے ہیں:

  • <img> ٹیگ میں border صفت کا استعمال (متروک لیکن اب بھی کام کرتا ہے)۔
  • CSS border پراپرٹی کا استعمال (تجویز کردہ جدید طریقہ)۔
⚠️ اہم: <img> ٹیگ میں border صفت HTML5 میں متروک ہے۔ جدید ویب ڈیولپمنٹ کے لیے CSS استعمال کریں۔ تاہم، سیکھنے کے مقاصد کے لیے دونوں طریقوں کا احاطہ کیا گیا ہے۔
💡 مشورہ: CSS آپ کو border-style، border-color، border-width، اور border-radius جیسی پراپرٹیز کے ساتھ زیادہ کنٹرول دیتا ہے۔

📊 آؤٹ پٹ کا پیش منظر

🖼️ تصاویر میں بارڈر شامل کرنا

📐 بارڈر اسٹائلز
solid
solid
dashed
dashed
dotted
dotted
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
🎨 بارڈر رنگ اور چوڑائیاں
سرخ بارڈر

border: 3px solid red;

نیلا ڈیشڈ

border: 5px dashed blue;

سبز ڈبل

border: 8px double green;

پیلا ڈاٹڈ

border: 4px dotted yellow;

🔲 گول بارڈر (border-radius)
border-radius: 10px
border-radius: 50%
border-radius: 20px 0

📝 مرحلہ وار: HTML صفحہ بنانا

طریقہ 1: border صفت کا استعمال (متروک)

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا کوڈ لکھیں:
<!-- طریقہ 1: border صفت کا استعمال (متروک) --> <html> <head> <title>Image Border - Attribute</title> </head> <body> <h1>بارڈر صفت کے ساتھ تصویر</h1> <!-- border صفت کا استعمال (قدر پکسلز میں موٹائی ہے) --> <img src="sample.jpg" alt="نمونہ تصویر" border="5"> <p>اس تصویر کا border صفت کا استعمال کرتے ہوئے بارڈر ہے۔</p> </body> </html>

طریقہ 2: CSS کا استعمال (تجویز کردہ جدید طریقہ)

  1. Notepad++ میں، نیچے دیا گیا کوڈ لکھیں:
<!-- طریقہ 2: CSS border پراپرٹی کا استعمال (تجویز کردہ) --> <html> <head> <title>Image Border - CSS</title> <style> /* مختلف بارڈر اسٹائلز */ .border-solid { border: 4px solid #e74c3c; } .border-dashed { border: 4px dashed #3498db; } .border-dotted { border: 4px dotted #f39c12; } .border-double { border: 6px double #2ecc71; } .border-rounded { border: 4px solid #9b59b6; border-radius: 15px; } .border-circle { border: 4px solid #e67e22; border-radius: 50%; width: 150px; height: 150px; object-fit: cover; } </style> </head> <body> <h1>CSS کا استعمال کرتے ہوئے تصویر کے بارڈر</h1> <!-- مختلف بارڈر اسٹائلز --> <h2>سالڈ بارڈر</h2> <img src="sample.jpg" alt="سالڈ بارڈر" class="border-solid" width="200"> <h2>ڈیشڈ بارڈر</h2> <img src="sample.jpg" alt="ڈیشڈ بارڈر" class="border-dashed" width="200"> <h2>ڈاٹڈ بارڈر</h2> <img src="sample.jpg" alt="ڈاٹڈ بارڈر" class="border-dotted" width="200"> <h2>ڈبل بارڈر</h2> <img src="sample.jpg" alt="ڈبل بارڈر" class="border-double" width="200"> <h2>گول بارڈر</h2> <img src="sample.jpg" alt="گول بارڈر" class="border-rounded" width="200"> <h2>دائرہ بارڈر</h2> <img src="sample.jpg" alt="دائرہ بارڈر" class="border-circle"> </body> </html>

دوسرا قدم: فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. ایک مقام منتخب کریں (مثلاً Desktop)۔
  3. فائل کا نام رکھیں: "image_border.html" یا "practical73.html"۔
  4. "Save as type" میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔

تیسرا قدم: براؤزر میں کھولیں

  1. اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. image_border.html فائل پر ڈبل‑کلک کریں۔
  3. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  4. آپ کو مختلف بارڈر اسٹائلز کے ساتھ تصاویر نظر آئیں گی۔

📊 CSS بارڈر پراپرٹیز

پراپرٹی مقصد مثال
border تمام بارڈر پراپرٹیز کے لیے شارٹ ہینڈ border: 3px solid red;
border-width بارڈر کی موٹائی سیٹ کرتا ہے border-width: 5px;
border-style بارڈر کا اسٹائل سیٹ کرتا ہے border-style: dashed;
border-color بارڈر کا رنگ سیٹ کرتا ہے border-color: #3498db;
border-radius گول کونے بناتا ہے border-radius: 10px;
border-top صرف اوپر کی جانب بارڈر سیٹ کرتا ہے border-top: 3px solid red;
border-bottom صرف نیچے کی جانب بارڈر سیٹ کرتا ہے border-bottom: 3px solid blue;
border-left صرف بائیں جانب بارڈر سیٹ کرتا ہے border-left: 3px solid green;
border-right صرف دائیں جانب بارڈر سیٹ کرتا ہے border-right: 3px solid orange;

📊 بارڈر اسٹائلز

اسٹائل کی قدر وضاحت پیش منظر
solid ایک ٹھوس لکیر
dashed ڈیشڈ لکیر
dotted ڈاٹڈ لکیر
double ڈبل ٹھوس لکیر
groove 3D نالی کا اثر
ridge 3D ابھرا ہوا اثر
inset 3D اندر دبا ہوا اثر
outset 3D باہر نکلا ہوا اثر

📊 border-radius کا استعمال

<!-- مختلف border-radius اقدار --> <!-- گول کونے (تمام اطراف) --> <img src="image.jpg" style="border: 3px solid red; border-radius: 10px;"> <!-- ہر کونے کے لیے مختلف شعاعیں --> <img src="image.jpg" style="border: 3px solid blue; border-radius: 10px 20px 30px 40px;"> <!-- دائرہ (مکمل گول) --> <img src="image.jpg" style="border: 3px solid green; border-radius: 50%; width: 150px; height: 150px; object-fit: cover;"> <!-- بیضوی --> <img src="image.jpg" style="border: 3px solid purple; border-radius: 50%; width: 200px; height: 120px; object-fit: cover;">

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
HTML5 میں border صفت کا استعمال متروک CSS border پراپرٹی استعمال کریں
شارٹ ہینڈ میں border-style بھول جانا بارڈر ظاہر نہیں ہوگا ہمیشہ اسٹائل شامل کریں: border: 3px solid red;
border-radius کی غلط ہجے پراپرٹی کام نہیں کرے گی صحیح ہجے استعمال کریں: border-radius
یونٹ غائب (px, em وغیرہ) غلط قدر ہمیشہ یونٹ شامل کریں: 10px
border کو outline کے ساتھ الجھانا مختلف پراپرٹیز بارڈر کے لیے border، آؤٹ لائن کے لیے outline استعمال کریں

📊 مشاہدات

  • <img> ٹیگ میں border صفت HTML5 میں متروک ہے۔
  • CSS border-style، border-color، border-width، اور border-radius کے ساتھ زیادہ کنٹرول فراہم کرتا ہے۔
  • border-radius گول کونے بناتا ہے، جس میں 50% ایک مکمل دائرہ بناتا ہے۔
  • آپ border-top، border-bottom، border-left، اور border-right کا استعمال کرتے ہوئے ہر طرف مختلف بارڈر سیٹ کر سکتے ہیں۔
  • border کو دیگر CSS پراپرٹیز جیسے box-shadow کے ساتھ یکجا کرنا مزید بصری اثرات پیدا کرتا ہے۔
  • جدید ویب ڈیولپمنٹ میں تصاویر کے اسٹائلنگ کے لیے ہمیشہ CSS استعمال کریں۔

✅ نتیجہ

آپ نے کامیابی سے:

  • متروک صفت طریقہ اور جدید CSS طریقہ دونوں کا استعمال کرتے ہوئے تصاویر کے ارد گرد بارڈر شامل کیے۔
  • مختلف بارڈر اسٹائلز (solid، dashed، dotted، double، groove، ridge، inset، outset) کا استعمال کیا۔
  • گول کونوں کے لیے border-radius کا استعمال کیا۔
  • نتائج کو براؤزر میں دیکھا۔
📌 اہم: جدید ویب ڈیولپمنٹ میں بارڈرز کے لیے ہمیشہ CSS استعمال کریں۔ یہ آپ کو زیادہ کنٹرول دیتا ہے اور معیاری عمل ہے۔ صاف، مختصر کوڈ کے لیے border: width style color; شارٹ ہینڈ استعمال کریں۔ گول کونوں اور گول تصاویر کے لیے border-radius استعمال کریں۔
💡 اگلے اقدامات: 3D اثرات کے لیے بارڈرز کو box-shadow کے ساتھ یکجا کرنے کی کوشش کریں۔ border-image کا استعمال کرتے ہوئے گریڈینٹ بارڈرز کے ساتھ تجربہ کریں۔ ہر تصویر کے لیے مختلف بارڈر اسٹائلز کے ساتھ ایک فوٹو گیلری بنائیں۔ بارڈر کے متبادل کے طور پر outline کے بارے میں سیکھیں!
⬅ Back to Practical Notebooks