CSS बॉर्डर का परिचय
CSS बॉर्डर प्रॉपर्टीज आपको किसी भी HTML एलिमेंट के चारों ओर सीमा (border) जोड़ने और उसे स्टाइल करने की अनुमति देती हैं। बॉर्डर में तीन मुख्य गुण होते हैं:
/* बेसिक बॉर्डर सिंटैक्स */
border: [width] [style] [color];
border: [width] [style] [color];
यह एक बेसिक बॉर्डर उदाहरण है
नोट: बॉर्डर एलिमेंट के आयामों (width/height) का हिस्सा होते हैं और बॉक्स मॉडल में शामिल होते हैं।
बॉर्डर स्टाइल्स
CSS में 10+ अलग-अलग बॉर्डर स्टाइल उपलब्ध हैं:
solid
(ठोस)
(ठोस)
dashed
(डैश्ड)
(डैश्ड)
dotted
(डॉटेड)
(डॉटेड)
double
(डबल)
(डबल)
groove
(ग्रूव)
(ग्रूव)
ridge
(रिज)
(रिज)
inset
(इनसेट)
(इनसेट)
outset
(आउटसेट)
(आउटसेट)
/* सभी बॉर्डर स्टाइल्स */
border-style: solid | dashed | dotted | double | groove | ridge | inset | outset | none | hidden;
border-style: solid | dashed | dotted | double | groove | ridge | inset | outset | none | hidden;
बॉर्डर चौड़ाई और रंग
बॉर्डर की चौड़ाई और रंग को अलग-अलग भी सेट किया जा सकता है:
/* अलग-अलग प्रॉपर्टीज */
border-width: 3px;
border-color: #3498db;
border-style: solid;
border-width: 3px;
border-color: #3498db;
border-style: solid;
टिप: आप बॉर्डर रंग के लिए किसी भी CSS कलर फॉर्मेट का उपयोग कर सकते हैं - HEX, RGB, HSL, या कलर नेम्स।
अलग-अलग साइड्स पर अलग-अलग बॉर्डर
बॉर्डर रेडियस
border-radius प्रॉपर्टी का उपयोग करके आप बॉर्डर के कोनों को गोल कर सकते हैं:
0px
5px
10px
20px
50%
/* बॉर्डर रेडियस उदाहरण */
border-radius: 10px; /* सभी कोने */
border-radius: 10px 20px 30px 40px; /* टॉप-लेफ्ट, टॉप-राइट, बॉटम-राइट, बॉटम-लेफ्ट */
border-radius: 50%; /* पूर्ण वृत्त/अंडाकार */
border-radius: 10px; /* सभी कोने */
border-radius: 10px 20px 30px 40px; /* टॉप-लेफ्ट, टॉप-राइट, बॉटम-राइट, बॉटम-लेफ्ट */
border-radius: 50%; /* पूर्ण वृत्त/अंडाकार */
अनियमित गोल कोनों वाला बॉक्स
अलग-अलग साइड बॉर्डर
आप प्रत्येक साइड के लिए अलग-अलग बॉर्डर सेट कर सकते हैं:
/* अलग-अलग साइड बॉर्डर */
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px double orange;
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px double orange;
प्रत्येक साइड पर अलग-अलग बॉर्डर स्टाइल
एडवांस टिप: आप
border-image प्रॉपर्टी का उपयोग करके कस्टम बॉर्डर इमेज भी सेट कर सकते हैं।
बॉर्डर के व्यावहारिक उपयोग
बॉर्डर का उपयोग सिर्फ सजावट से ज्यादा के लिए किया जा सकता है:
/* टूलटिप बनाना */
.tooltip {
position: relative;
border-bottom: 1px dotted black; /* डॉटेड अंडरलाइन */
}
/* त्रिकोण बनाना */
.arrow {
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
.tooltip {
position: relative;
border-bottom: 1px dotted black; /* डॉटेड अंडरलाइन */
}
/* त्रिकोण बनाना */
.arrow {
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
क्रिएटिव आइडिया: बॉर्डर का उपयोग करके आप बिना किसी एक्स्ट्रा HTML के त्रिकोण, टूलटिप, डिवाइडर्स और अन्य डिज़ाइन एलिमेंट्स बना सकते हैं।
सारांश
- बेसिक बॉर्डर:
border: width style color; - स्टाइल्स: solid, dashed, dotted, double, groove, ridge
- गोल कोने:
border-radiusसे एलिमेंट को गोल बनाएं - अलग-अलग साइड: border-top, border-right, border-bottom, border-left
- एडवांस्ड: border-image, border-collapse (टेबल्स के लिए)