Css Notes

CSS Borders

by

CSS बॉर्डर प्रॉपर्टी के द्वारा आप किसी एलीमेंट के लिए बॉर्डर जोड़ सकते हैं इसके अलावा बॉर्डर की स्टाइल, चौड़ाई और रंग भी निर्दिष्ट कर सकते हैं। CSS में निम्नलिखित बॉर्डर प्रॉपर्टी शामिल हैं।

  • border-style – Specifies the style of the border
  • border-color – Specifies the color of the border
  • border-width – Specifies the width of the border
  • border – A shorthand border property
CSS Code

h1{
border-width: 5px;
border-style: solid;
border-color: green;
}

HTML Code

<body>
  <h1>India is a Great Country</h1>
</body>

उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा –

India is a Great Country

border-style प्रॉपर्टी की विभिन्न Value निम्न प्रकार हैं –

  • dotted – बिंदुओं वाला बॉर्डर
  • dashed – डैश लाइन वाला बॉर्डर
  • solid – लाइन वाला बॉर्डर
  • double – डबल लाइन वाला बॉर्डर
  • groove – ग्रूव बॉर्डर, इसके लिए बॉर्डर रंग न जोड़े।
  • ridge – रिज बॉर्डर स्टाइल, इसके लिए बॉर्डर रंग न जोड़े।
  • inset – इनसेट बॉर्डर स्टाइल, इसके लिए बॉर्डर रंग न जोड़े।
  • outset – आउटसेट बॉर्डर स्टाइल, इसके लिए बॉर्डर रंग न जोड़े।
  • none – कोई बॉर्डर नहीं।
  • hidden – छिपा हुआ बॉर्डर।

अलग-अलग प्रकार के बॉर्डर

Solid 5px border-width

Green dotted border

Blue dashed border

A solid border

A double border

A groove border. The effect depends on the border-color value

A ridge border. The effect depends on the border-color value

An inset border. The effect depends on the border-color value

An outset border. The effect depends on the border-color value

A mixed border

No border

A hidden border

उपरोक्त बॉर्डर स्टाइल के लिए CSS कोड –

Example 1

p{
  border-style: dotted;
  border-color: green;
  border-width: 2px;
}

Example 2
Mixed border style

p{
  border-style: dotted dashed solid double;
}

CSS Border Width

border-width प्रॉपर्टी किसी एलीमेंट की चारों दिशाओं मे बॉर्डर की चौड़ाई निर्दिष्ट करता है। चौड़ाई को एक विशिष्ट साइज़ (px, pt, cm, em, आदि) के रूप में या तीन पूर्व-निर्धारित मानों में से किसी एक का उपयोग करके सेट किया जा सकता हैं। ये पूर्व-निर्धारित वैल्यू है – thin, medium, thick.

Solid 5px border-width


Solid Medium border-width


Dotted 2px border-width


Dotted thick border-width


Examples
Demonstration of the different border widths:

p {
  border-style: solid;
  border-width: 5px;
}

p {
  border-style: solid;
  border-width: medium;
}

p {
  border-style: dotted;
  border-width: 2px;
}

p {
  border-style: dotted;
  border-width: thick;
}

border-width प्रॉपर्टी में एक से चार मान हो सकते हैं (शीर्ष बॉर्डर, दाएं बॉर्डर, निचले बॉर्डर और बाएं बॉर्डर के लिए):

Example

p {
  border-style: solid;
  border-width: 20px 15px 5px 25px; /* 20px top, 15px right, 5px bottom and 25px left */
}

CSS Rounded Borders

border-radius प्रॉपर्टी के द्वारा बॉर्डर के कोनो (Corners) को राउन्ड किया जा सकता है। यह प्रॉपर्टी निम्न प्रकार कार्य करती हैं –

10 pixel solid red rounded border

20 pixel solid blue rounded border

उपरोक्त बॉर्डर स्टाइल के लिए CSS कोड –

Example

p {
  border: 2px solid red; /* This is border shorthand property */
  border-radius: 5px;
}
Share This Page

Leave a Comment