Introduction
CSS Border का उपयोग किसी HTML Element (जैसे div, button, table, image आदि) के चारों ओर बॉर्डर (सीमा) बनाने के लिए किया जाता है। Border किसी वेब पेज को अधिक आकर्षक और व्यवस्थित बनाता है। CSS में Border की मोटाई (Width), प्रकार (Style), रंग (Color) और किनारों (Sides) को अलग-अलग नियंत्रित किया जा सकता है।
Syntax
selector{
border: width style color;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box{
border:2px solid red;
padding:20px;
}
</style>
</head>
<body>
<div class="box">
Welcome to UICT
</div>
</body>
</html>
CSS Border Properties
CSS Border मुख्यतः निम्नलिखित Properties से मिलकर बनता है—
- Border Style
- Border Width
- Border Color
- Border Sides
- Border Shorthand
- Rounded Borders (Border Radius)
1. Border Style
Definition
Border किस प्रकार दिखाई देगा, यह Border Style निर्धारित करती है। यदि Border Style नहीं दी जाएगी, तो Border दिखाई नहीं देगा।
Syntax
border-style:value;
Border Style Values
| Value | Description |
|---|---|
| solid | सीधी लाइन |
| dotted | बिंदुओं वाली लाइन |
| dashed | डैश वाली लाइन |
| double | दोहरी लाइन |
| groove | 3D Groove Border |
| ridge | 3D Ridge Border |
| inset | अंदर की ओर Border |
| outset | बाहर की ओर Border |
| none | Border नहीं दिखेगा |
| hidden | Border छिपा रहेगा |
Example
.box{
border-style:solid;
}
.box{
border-style:dashed;
}
.box{
border-style:dotted;
}
.box{
border-style:double;
}
2. Border Width
Definition
Border कितना मोटा (Thick) होगा, यह Border Width Property निर्धारित करती है।
Syntax
border-width:value;
Example
.box{
border-style:solid;
border-width:5px;
}
Different Width
border-width:5px 10px 15px 20px;
क्रम
Top
Right
Bottom
Left
3. Border Color
Definition
Border का रंग बदलने के लिए Border Color Property का उपयोग किया जाता है।
Syntax
border-color:value;
Example
.box{
border-style:solid;
border-color:red;
}
RGB Example
border-color:rgb(255,0,0);
HEX Example
border-color:#ff0000;
4. Border Sides
Definition
यदि केवल किसी एक या दो Side पर Border लगाना हो, तो Border Side Properties का उपयोग किया जाता है।
Border Top
border-top:3px solid red;
Border Right
border-right:3px dashed blue;
Border Bottom
border-bottom:3px dotted green;
Border Left
border-left:3px double orange;
Complete Example
.box{
border-top:4px solid red;
border-right:4px dashed blue;
border-bottom:4px dotted green;
border-left:4px double orange;
}
5. Border Shorthand
Definition
Border Width, Style और Color को एक ही लाइन में लिखने के लिए Border Shorthand Property का उपयोग किया जाता है।
Syntax
border: width style color;
Example
border:4px solid blue;
ऊपर लिखा गया Code बराबर है—
border-width:4px;
border-style:solid;
border-color:blue;
6. Rounded Borders (Border Radius)
Definition
Border के Corners (कोनों) को गोल (Rounded) बनाने के लिए Border Radius Property का उपयोग किया जाता है।
Syntax
border-radius:value;
Example
.box{
border:3px solid red;
border-radius:15px;
}
Circle Example
.circle{
width:150px;
height:150px;
border:4px solid blue;
border-radius:50%;
}
Different Radius
border-radius:10px 20px 30px 40px;
क्रम
Top Left
Top Right
Bottom Right
Bottom Left
Complete Practical Example
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:300px;
padding:20px;
margin:20px auto;
background:#f8f8f8;
border:4px solid blue;
border-radius:15px;
text-align:center;
font-size:22px;
}
</style>
</head>
<body>
<div class="box">
Welcome to UICT
</div>
</body>
</html>
Advantages of CSS Border
- Website को आकर्षक बनाता है।
- Content को अलग-अलग Sections में विभाजित करता है।
- Buttons और Cards को सुंदर बनाता है।
- Tables और Forms को व्यवस्थित दिखाता है।
- Professional Web Design बनाने में सहायता करता है।
Important Interview Questions
Q1. CSS Border क्या है?
उत्तर: CSS Border HTML Elements के चारों ओर सीमा (Border) बनाने के लिए उपयोग किया जाता है।
Q2. Border दिखाई देने के लिए कौन-सी Property आवश्यक है?
उत्तर: border-style
Q3. Border की मोटाई कौन-सी Property से निर्धारित होती है?
उत्तर: border-width
Q4. Border का रंग बदलने के लिए कौन-सी Property उपयोग होती है?
उत्तर: border-color
Q5. Border की केवल ऊपर वाली Side पर Border लगाने के लिए कौन-सी Property उपयोग होती है?
उत्तर: border-top
Q6. Border की सभी Properties को एक साथ लिखने के लिए कौन-सी Property उपयोग होती है?
उत्तर: border
Q7. Rounded Corner बनाने के लिए कौन-सी Property उपयोग होती है?
उत्तर: border-radius
Q8. Circle बनाने के लिए Border Radius का कितना मान दिया जाता है?
उत्तर: 50%
Summary
- CSS Border किसी Element के चारों ओर सीमा बनाता है।
- Border Style के बिना Border दिखाई नहीं देता।
- Border Width से मोटाई निर्धारित होती है।
- Border Color से रंग बदला जाता है।
- Border Top, Right, Bottom और Left को अलग-अलग नियंत्रित किया जा सकता है।
- Border Shorthand से Width, Style और Color एक साथ लिखे जा सकते हैं।
- Border Radius से Rounded Corners तथा Circle बनाए जाते हैं।
Assignment (Practice)
Part A – Theory
- CSS Border क्या है?
- Border Style कितने प्रकार की होती है?
- Border Width क्या है?
- Border Color कैसे बदलते हैं?
- Border Shorthand क्या है?
- Rounded Border क्या है?
- Border Radius का उपयोग क्यों किया जाता है?
- Border Top और Border Bottom में क्या अंतर है?
- Border Property का Syntax लिखिए।
- Border Style के पाँच प्रकार लिखिए।
Part B – Practical
- 200px चौड़ाई वाला Box बनाइए जिसमें 2px Solid Red Border हो।
- 5px Dashed Blue Border वाला Box बनाइए।
- चारों Side पर अलग-अलग Border Style और Color लगाइए।
- 20px Border Radius वाला Box बनाइए।
- 150×150 Pixel का Circle बनाइए।
border-width:5px 10px 15px 20px;का प्रयोग करके उदाहरण बनाइए।- HEX Code का उपयोग करके Border Color सेट कीजिए।
- RGB Value का उपयोग करके Border Color सेट कीजिए।
- Border Shorthand का उपयोग करके Purple Border बनाइए।
- एक Student Information Card डिज़ाइन कीजिए जिसमें Border, Border Radius, Padding और Background का उपयोग किया गया हो।
Mini Project
Student Profile Card
Requirements:
- Width: 320px
- Border: 3px Solid Blue
- Border Radius: 15px
- Padding: 20px
- Student Photo (Placeholder)
- Student Name
- Course Name
- Mobile Number
- Email ID
- Hover करने पर Border Color Green हो जाए।
