इस Tutorial में हम आपको CSS Border Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
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
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 की जाती हैं.
</style> <body> <h4>This Heading Border is Solid.</h4> <p>This Paragraph Text Border is Dashed.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा. हमने यहाँ सिर्फ दो Border Styles का ही इस्तेमाल किया हैं. आप एक बार सभी प्रकार की Border Styles को अजमा के देख लें.
This Heading Border is Solid.
This Paragraph Text Border is Dashed.
border-width Property
इस Border Property द्वारा आप Border की मोटाई Set कर सकते हैं. Border को आप thin, medium एवं thick मोटाई में Set कर सकते हैं.
</style> <body> <h4>This Heading Border Width is 5px.</h4> <p>This Paragraph Text Border Width is 3px.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Heading Border Width is 5px.
This Paragraph Text Border Width is 3px.
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 किया जाता हैं.
</style> <body> <h4>This Heading Border Color is Red.</h4> <p>This Paragraph Text Border Color is Green.</p> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Heading Border Width is 5px.
This Paragraph Text Border Width is 3px.
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 करती हैं.
border-radius Property
Border के कोनों की गुलाई Set करने के लिए border-radius Property का इस्तेमाल किया जाता हैं. आप इसकी Value Pixels, Points या फिर Percentage में भी Set कर सकते हैं.
</style> <body> <h4>This Heading Border Radius is 20px.</h4> <p>This Paragraph Text Border Radius is 50%.</p> </body>
</html>
This Heading Border Radius is 20px.
This Paragraph Text Border Radius is 50%.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Border Property के बारे में पूरी जानकारी दी हैं. आपने विभिन्न Border Properties के बारे में भी सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
