CSS border-style प्रयोग

परिभाषा और उपयोग

border-style एट्रिब्यूट एलिमेंट के सभी बॉर्डर के शैली को सेट करता है, या एकल रूप से प्रत्येक बॉर्डर के बॉर्डर शैली को सेट करता है。

जब तक यह मूल्य none नहीं है तभी बॉर्डर दिखाई देता है。

उदाहरण 1

border-style:dotted solid double dashed;
  • ऊपरी बॉर्डर बिंदुओं के हैं
  • दायाँ बॉर्डर ठोस है
  • नीचे बॉर्डर दोहरे हैं
  • बाईं बॉर्डर फ्लैट है

उदाहरण 2

border-style:dotted solid double;
  • ऊपरी बॉर्डर बिंदुओं के हैं
  • दायाँ बॉर्डर और बाईं बॉर्डर ठोस हैं
  • नीचे बॉर्डर दोहरे हैं

उदाहरण 3

border-style:dotted solid;
  • ऊपरी बॉर्डर और नीचे बॉर्डर बिंदुओं के हैं
  • दायाँ बॉर्डर और बाईं बॉर्डर ठोस हैं

उदाहरण 4

border-style:dotted;
  • सभी 4 बॉर्डर बिंदुओं के हैं

अन्य देखें:

CSS शिक्षा:CSS बॉर्डर

HTML DOM संदर्भ पुस्तक:}borderStyle गुण

उदाहरण

4 ओर के बॉर्डर की शैली सेट करें:

p
  {
  border-style:solid;
  }

अपने आप प्रयास करें

CSS व्याकरण

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

प्रतियोगी वैल्यू

वैल्यू वर्णन
none बिना बॉर्डर को परिभाषित करता है。
hidden इसके साथ "none" एक-सा है। लेकिन तालिकाओं पर इसके अलावा, तालिकाओं के लिए "hidden" बॉर्डर टकराव को सुलझाने के लिए इस्तेमाल किया जाता है。
dotted बिंदुओं के बॉर्डर को परिभाषित करता है। अधिकांश ब्राउज़रों में यह एक सटीक लाइन के रूप में प्रदर्शित होता है。
dashed धूसर लाइन को परिभाषित करता है। अधिकांश ब्राउज़रों में यह एक सटीक लाइन के रूप में प्रदर्शित होता है。
solid सटीक लाइन को परिभाषित करता है。
double दो लाइनों को परिभाषित करता है। दोनों लाइनों की चौड़ाई border-width के मान के अनुरूप है।
groove 3D grove बॉर्डर को परिभाषित करता है। इसका प्रभाव border-color के मान पर निर्भर करता है。
ridge 3D बेल्ट बॉर्डर को परिभाषित करता है। इसका प्रभाव border-color के मान पर निर्भर करता है。
inset 3D inset बॉर्डर को परिभाषित करता है। इसका प्रभाव border-color के मान पर निर्भर करता है。
outset 3D outset बॉर्डर को परिभाषित करता है। इसका प्रभाव border-color के मान पर निर्भर करता है。
inherit पितृ तत्व से बॉर्डर शैली को विरासत करना निर्धारित करता है。

वर्णन

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

तकनीकी विवरण

डिफ़ॉल्ट वैल्यू: not specified
विरासतीयता: no
संस्करण: CSS1
जावास्क्रिप्ट व्याकरण: object.style.borderStyle="dotted double"

और भी कई उदाहरण

चारों ओर के बॉर्डर के शैली सेट करना
इस उदाहरण में दिखाया गया है कि किस प्रकार चारों ओर के बॉर्डर के शैली को सेट किया जाता है。
प्रत्येक किनारे के लिए विभिन्न बॉर्डर सेट करना
इस उदाहरण में दिखाया गया है कि किस प्रकार एकल के प्रत्येक किनारे विभिन्न बॉर्डर सेट किया जाता है。

ब्राउज़र समर्थन

तालिका में दिए गए नंबरों से पूर्णता से इस विशेषता के पहले ब्राउज़र का संस्करण समर्थित है।

च्रोम IE / एज फ़ायरफॉक्स सफ़ारी ओपेरा
1.0 4.0 1.0 1.0 3.5