CSS Border का परिचय (CSS border properties) – Tutorial in Hindi

हेल्लो दोस्तों! आज हम इस आर्टिकल में  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 कर सकते हैं.

WhatsApp Group Join Now
Telegram Group Join Now

CSS Border का परिचय (CSS border properties) - Tutorial in Hindi

विभिन्न प्रकार की CSS Border Properties

CSS Border को अपनी पसंद के अनुसार Customize करने के लिए हमें विभिन्न CSS Border Properties की जरूरत पडती हैं.

CSS द्वारा Border की अलग-अलग Style के लिए अलग-अलग Properties उपलब्ध करवाई जाती हैं. इनके नाम इस प्रकार हैं:

  1. border-style
  2. border-width
  3. border-color
  4. border-radius
  5. 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 में दिखाई देती हैं.
इसे पढ़े :-  CSS Height Property क्या हैं पूरी जानकारी हिंदी में? - Hindi Tutorial

जब आप किसी Element के लिए Border Declare करते हैं तो वह चारों तरफ (top, right, bottom, left) से एक समान रहती हैं.

मगर आप चाहे तो Border को Individually भी Set कर सकते हैं. इसके लिए निम्न Values का इस्तेमाल किया जाता हैं.

  1. border-top-style– इससे Element की Top Border की Style Set की जाती हैं.
  2. border-right-style– इससे Element की Right Border की Style Set की जाती हैं.
  3. border-bottom-style– इससे Element की Bottom Border की Style Set की जाती हैं.
  4. 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

WhatsApp Group Join Now
Telegram Group Join Now

 

इस Border Property द्वारा आप Border की मोटाई Set कर सकते हैं. Border को आप thinmedium एवं thick मोटाई में Set कर सकते हैं.

आप चाहे तो Border Width को pxcmpt आदि Absolute Measurement Units में भी Set कर सकते हैं.

इसे पढ़े :-  CSS Selectors in Hindi – Selectors क्या होते हैं? CSS Selector के प्रकार ?

आप किसी Element Border की चार तरफ से मोटाई Set कर सकते हैं. जिसकी Values निम्न होती हैं.

  1. border-top-width– Element की Top Border Width Set की जाती हैं.
  2. border-right-width– Element की Right Border Width Set की जाती हैं.
  3. border-bottom-width– Element की Bottom Border Width Set की जाती हैं.
  4. 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 का इस्तेमाल किया जाता हैं.

  1. border-top-color– Top Border का Color Set किया जाता हैं.
  2. border-right-color– Right Border का Color Set किया जाता हैं.
  3. border-bottom-color– Bottom Border का Color Set किया जाता हैं.
  4. 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

 

इसे पढ़े :-  CSS text properties in hindi-css टेक्स्ट प्रॉपर्टीज क्या है? - Hindi tutorial

इस Property द्वारा सभी Border Properties को सिर्फ एक ही Property में Set किया जाता हैं. इसे Shorthand Border Property कहते हैं.

किसी Element के लिए Border Set करने के लिए सबसे ज्यादा इसी Property का इस्तेमाल किया जाता हैं.

h4 {
border: 2px red dashed;
}
WhatsApp Group Join Now
Telegram Group Join Now

इस 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 मे लिखे।

  1. border-width
  2. border-style (यह property लिखना जरूरी है)
  3. border-color

 

Leave a Reply

error: Content is protected !!
Scroll to Top