हेल्लो दोस्तों! आज हम इस आर्टिकल में CSS border properties के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
CSS Border का परिचय :-
Border, CSS Box Model का अहम हिस्सा होती हैं. आप HTML के लगभग सभी Elements के लिए Border Set कर सकते हैं.
CSS Border Property द्वारा आप Border की Look and Feel को अपनी पंसद के अनुसार Customize कर सकते हैं. आप Border Color, मोटाई (Width), दिशा आदि को अपनी पसंद के अनुसार Set कर सकते हैं.
विभिन्न प्रकार की CSS Border Properties
CSS Border को अपनी पसंद के अनुसार Customize करने के लिए हमें विभिन्न CSS Border Properties की जरूरत पडती हैं.
CSS द्वारा Border की अलग-अलग Style के लिए अलग-अलग Properties उपलब्ध करवाई जाती हैं. इनके नाम इस प्रकार हैं:
- border-style
- border-width
- border-color
- border-radius
- border
1- Border-style Property
border-style Property द्वारा Border Type को Declare किया जाता हैं.
Border Type से हमारा मतलब हैं कि आप किस Element पर कौनसी Style की Border लगाना चाहते हैं.
CSS द्वारा कई प्रकार की Border Style Provide कराई जाती हैं. इन्हे Values कहा जाता हैं.
- none – कोई बॉर्डर नही होती हैं.
- solid– एक सीधी लाईन में बॉर्डर में लगती हैं.
- double– दो सीधी लाईन में बॉर्डर.
- dashed – बॉर्डर लाईन – Dashed में बदल जाती हैं.
- dotted – बॉर्डर लाईन . FullStop में बदल जाती हैं.
- groove – बॉर्डर लाईन Groove Style में दिखाई देती हैं.
- ridge – बॉर्डर लाईन Ridge Style में दिखाई देती हैं.
- inset – बॉर्डर Inset Style में दिखाई देती हैं.
- outset – बॉर्डर Outset Style में दिखाई देती हैं.
- mix – बॉर्डर Mix Style में दिखाई देती हैं.
जब आप किसी Element के लिए Border Declare करते हैं तो वह चारों तरफ (top, right, bottom, left) से एक समान रहती हैं.
मगर आप चाहे तो Border को Individually भी Set कर सकते हैं. इसके लिए निम्न Values का इस्तेमाल किया जाता हैं.
- border-top-style– इससे Element की Top Border की Style Set की जाती हैं.
- border-right-style– इससे Element की Right Border की Style Set की जाती हैं.
- border-bottom-style– इससे Element की Bottom Border की Style Set की जाती हैं.
- border-left-style– इससे Element की Left Border की Style Set की जाती हैं.
इसे Try कीजिए
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Style Examples</title>
<style type=”text/css”>
h4 {
border-style: solid;
}
p {
border-style: dashed;
}
</style>
<body>
<h4>This Heading Border is Solid.</h4>
<p>This Paragraph Text Border is Dashed.</p>
</body>
</html>
2-Border-width Property
इस Border Property द्वारा आप Border की मोटाई Set कर सकते हैं. Border को आप thin, medium एवं thick मोटाई में Set कर सकते हैं.
आप चाहे तो Border Width को px, cm, pt आदि Absolute Measurement Units में भी Set कर सकते हैं.
आप किसी Element Border की चार तरफ से मोटाई Set कर सकते हैं. जिसकी Values निम्न होती हैं.
- border-top-width– Element की Top Border Width Set की जाती हैं.
- border-right-width– Element की Right Border Width Set की जाती हैं.
- border-bottom-width– Element की Bottom Border Width Set की जाती हैं.
- border-left-width– Element की Left Border Width Set की जाती हैं.
इसे Try कीजिए
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Width Examples</title>
<style type=”text/css”>
h4 {
border-width: 5px; border-style: dashed;
}
p {
border-width: 3px; border-style: double;
}
</style>
<body>
<h4>This Heading Border Width is 5px.</h4>
<p>This Paragraph Text Border Width is 3px.</p>
</body>
</html>
3- border-color Property
इस Border Property का इस्तेमाल Border Color Set करने के लिए किया जाता हैं.
Border Color आप Color Name, RGB Value, Hex Value आदि में Set कर सकते हैं. इसके बारे में अधिक जानकारी के लिए आप हमारे CSS Color Tutorial को पढ सकते हैं.
आप किसी भी Element की Border Color चारों तरफ से अलग-अलग Set कर सकते हैं. इसके लिए निम्न Values का इस्तेमाल किया जाता हैं.
- border-top-color– Top Border का Color Set किया जाता हैं.
- border-right-color– Right Border का Color Set किया जाता हैं.
- border-bottom-color– Bottom Border का Color Set किया जाता हैं.
- border-left-color– Left Border का Color Set किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Color Examples</title>
<style type=”text/css”>
h4 {
border-color: red; border-style: dashed;
}
p {
border-color: green; border-style: double;
}
</style>
<body>
<h4>This Heading Border Color is Red.</h4>
<p>This Paragraph Text Border Color is Green.</p>
</body>
</html>
4- Border Property
इस Property द्वारा सभी Border Properties को सिर्फ एक ही Property में Set किया जाता हैं. इसे Shorthand Border Property कहते हैं.
किसी Element के लिए Border Set करने के लिए सबसे ज्यादा इसी Property का इस्तेमाल किया जाता हैं.
h4 {
border: 2px red dashed;
}
इस Property में हमने एक साथ तीन Values Declare की हैं. पहली border-width, दूसरी border-color और अंतिम border-style को Represent करती हैं.
5- Border-radius Property
Border के कोनों की गुलाई Set करने के लिए border-radius Property का इस्तेमाल किया जाता हैं. आप इसकी Value Pixels, Points या फिर Percentage में भी Set कर सकते हैं.
इसे Try कीजिए
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Radius Examples</title>
<style type=”text/css”>
h4 {
border-color: red; border-style: dashed; border-radius: 20px;
}
p {
border-color: green; border-style: double; border-radius: 50%
}
</style>
<body>
<h4>This Heading Border Radius is 20px.</h4>
<p>This Paragraph Text Border Radius is 50%.</p>
</body>
</html>
6- Shorthand Border Property
आप सभी border property को एक ही line मे define कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red ;
}
</style>
</head>
<body>
<h2>The border Property</h2>
<p> CSS Border Property in Hindi </p>
</body>
</html>
यहा border property को इस order मे लिखे।
- border-width
- border-style (यह property लिखना जरूरी है)
- border-color
