CSS Border का परिचय
HTML के लगभग सभी Elements के लिए Border Set कर सकते हैं। CSS Border Property द्वारा Border की Look and Feel को अपनी पंसद के अनुसार Customize कर सकते हैं। Border Color, मोटाई (Width), दिशा आदि को अपनी पसंद के अनुसार Set कर सकते हैं।
Different types of 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 की जाती हैं।
<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>
Border Width Property
इस Border Property द्वारा Border की मोटाई Set कर सकते हैं। Border को thin, medium एवं thick मोटाई में 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 की जाती हैं।
<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>
Border Color Property
इस Border Property का प्रयोग Border Color Set करने के लिए किया जाता हैं। Border Color Color Name, RGB Value, Hex Value आदि में Set कर सकते हैं। किसी भी 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 किया जाता हैं।
<!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;
}
<body>
<h4>This Heading Border Color is Red.</h4>
<p>This Paragraph Text Border Color is Green.</p>
</body>
</style>
</html>
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 कर सकते हैं।
<!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%
}
<body>
<h4>This Heading Border Radius is 20px.</h4>
<p>This Paragraph Text Border Radius is 50%.</p>
</body>
</style>
</html>OUTPUT-
<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%
}
<body>
<h4>This Heading Border Radius is 20px.</h4>
<p>This Paragraph Text Border Radius is 50%.</p>
</body>
</style>
</html>
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment