सीमा विकल्प. CSS में बॉर्डर बनाना. संपत्ति सीमा. सीएसएस सीमा-चौड़ाई वाक्यविन्यास

व्लाद मर्ज़ेविच

त्रि-आयामी तालिका का प्रभाव फ़्रेम या कोशिकाओं में हल्के और गहरे रंगों के एक साथ उपयोग के माध्यम से प्राप्त किया जाता है, जिससे यह भ्रम पैदा होता है कि तालिका वेब पेज की पृष्ठभूमि से ऊपर उभरी हुई है। उदाहरण के लिए, किसी तालिका के चारों ओर का फ़्रेम डिफ़ॉल्ट रूप से 3D के रूप में प्रस्तुत किया जाता है। हालाँकि इस प्रकार का फ़्रेम वेब डिज़ाइनरों के बीच बहुत लोकप्रिय नहीं है, लेकिन इसका मतलब यह नहीं है कि ऐसे फ़्रेम का उपयोग बिल्कुल नहीं किया जाना चाहिए। शैलियों का उपयोग करके, तालिका को त्रि-आयामी सहित विभिन्न प्रकार के लुक दिए जा सकते हैं, जो अपने "फ्लैट" समकक्षों की पृष्ठभूमि के खिलाफ सफलतापूर्वक खड़े हो सकते हैं।

3डी फ़्रेम की मोटाई बॉर्डर टैग विशेषता द्वारा नियंत्रित की जाती है

निर्दिष्ट तालिका बनाने के लिए, हम सब कुछ निकाल लेंगे संभावित पैरामीटरशैलियों में, और एक फ़्रेम जोड़ने पर बॉर्डर विशेषता निर्दिष्ट की जाएगी (उदाहरण 1)।

उदाहरण 1: बॉर्डर विशेषता का उपयोग करना

इस उदाहरण में, तालिका के चारों ओर का बॉर्डर दो पिक्सेल मोटा है, और इसका स्वरूप तालिका के आकार के आधार पर थोड़ा भिन्न हो सकता है। विभिन्न ब्राउज़र.

शैलियाँ आपको बॉर्डर यूनिवर्सल स्टाइल प्रॉपर्टी का उपयोग करके त्रि-आयामी तालिका प्रभाव बनाने की भी अनुमति देती हैं। मान रेखा शैली और उसकी मोटाई को दर्शाते हैं, जो तालिका के अंतिम स्वरूप को बहुत प्रभावित करते हैं। तालिका में 1 कुछ मान और अंतिम परिणाम दिखाता है।

उदाहरण 2 बॉर्डर जोड़ने के लिए खांचे के मान और 5 पिक्सेल की मोटाई वाली शैली का उपयोग करता है। परिणामी तालिका चित्र में दिखाई गई है। 2.

टेबल के चारों ओर बॉर्डर बनाने के लिए बॉर्डर स्टाइल प्रॉपर्टी को टेबल चयनकर्ता पर और प्रत्येक सेल में बॉर्डर जोड़ने के लिए टीडी और टीएच चयनकर्ताओं पर लागू किया जाता है। उन स्थानों पर दोहरी रेखाओं से बचने के लिए जहां विभिन्न कोशिकाएं स्पर्श करती हैं, सीमा-संक्षरण गुण का उपयोग पतन मान के साथ किया जाता है (उदाहरण 2)।

उदाहरण 2: शैलियों का उपयोग करके एक फ़्रेम बनाएं

यह उदाहरण कोशिकाओं और संपूर्ण तालिका के चारों ओर एक धँसा हुआ ग्रे बॉर्डर बनाता है।

हम स्वयं त्रि-आयामी तालिका की पंक्तियों में गहरी और हल्की रेखाओं को सही ढंग से बदलकर उसका प्रभाव बना सकते हैं (चित्र 3)।

यह चित्रण दर्शाता है कि तालिका की सम पंक्तियों में एक हल्की पृष्ठभूमि, नीचे एक सफेद क्षैतिज रेखा और शीर्ष पर एक गहरे भूरे रंग की रेखा है। हालाँकि, आप इसकी दूसरी तरह से व्याख्या कर सकते हैं और कह सकते हैं कि विषम रेखाओं के ऊपर एक सफेद रेखा और नीचे एक गहरी रेखा होती है।

चित्र में दिखाए अनुसार बनाने के लिए। 3 तालिकाएँ, आइए एक अतिरिक्त वर्ग का परिचय दें जिसे सम कहा जाता है और इसे तालिका की सम पंक्तियों में जोड़ें। उसी समय, आप सीधे टीआर चयनकर्ता के लिए बॉर्डर प्रॉपर्टी सेट नहीं कर सकते, इस स्थिति में लाइन बस प्रदर्शित नहीं होगी; इसलिए, हम संदर्भ चयनकर्ताओं का उपयोग करेंगे और .even टीडी निर्माण जोड़ेंगे, जो कहता है कि सम वर्ग वाले तत्व के अंदर स्थित सभी कोशिकाओं के लिए हम नीचे और ऊपर एक रेखा निर्धारित करते हैं। पृष्ठभूमि रंग को पृष्ठभूमि संपत्ति का उपयोग करके टीआर चयनकर्ता पर लागू किया जा सकता है, जैसा कि उदाहरण 3 में दिखाया गया है।

उदाहरण 3: तालिका पंक्तियों का चयन करना

यदि तालिका की निचली पंक्ति सम है, जिसका पृष्ठभूमि शैली में हल्के रंग में सेट है, तो तालिका के नीचे आप एक हल्की पट्टी देख सकते हैं। आप इसकी उपस्थिति के साथ रह सकते हैं या बिना निचली रेखा के एक नई स्टाइल क्लास बना सकते हैं और इसे इस लाइन पर लागू कर सकते हैं।

किसी तत्व के चारों ओर खींची गई सीमा को प्रदर्शित करने के लिए उपयोग किया जाता है। फ़्रेम की मोटाई बॉर्डर प्रॉपर्टी द्वारा निर्धारित की जाती है, और यदि बॉर्डर: 0 निर्दिष्ट है, तो फ़्रेम प्रदर्शित नहीं होता है। अन्य सीमा मानों के साथ, छवि को हमेशा प्राथमिकता दी जाती है। पृष्ठभूमि, यदि पृष्ठभूमि प्रॉपर्टी के माध्यम से सेट की गई है, तो फ्रेम के नीचे प्रदर्शित होती है।

वाक्य - विन्यास

सीमा-छवि: कोई नहीं | [<адрес> [<число> | <проценты>]{1,4} ? ] && {0,2}

पदनाम

मान

कोई नहीं खींचा गया बॉर्डर प्रदर्शित नहीं करता है, सेट बॉर्डर शैली का उपयोग किया जाता है।<адрес>ग्राफ़िक फ़ाइल का पथ. आवश्यक पैरामीटर.

फ़्रेम बनाने की छवि स्वयं चित्र में दिखाई गई है। 1 और इसमें नौ क्षेत्र शामिल हैं: चार कोने, ऊपर, दाएं, नीचे, बाईं ओर और केंद्रीय भाग, जिसमें तत्व की सामग्री प्रदर्शित होती है।

चावल। 1. फ़्रेम बनाने के लिए छवि

<число>

एक, दो, तीन या चार मान जो पिक्सेल में छवि के हिस्सों के आकार को दर्शाते हैं, जिससे विभाजन क्षेत्रों को परिभाषित किया जाता है। इकाइयाँ स्वयं नहीं लिखी गई हैं, केवल संख्या (चित्र में 10, 10px नहीं) लिखी गई है। 2 लाल रेखाएँ फ़्रेम बनाने के लिए आवश्यक क्षेत्रों को उजागर करती हैं।

चावल। 2. मूल छवि को क्षेत्रों में विभाजित करना

आप रिक्त स्थान से अलग करके एक, दो, तीन या चार मानों का उपयोग कर सकते हैं। प्रभाव मानों की संख्या पर निर्भर करता है और तालिका में दिखाया गया है। 1.

फ़्रेम उपस्थिति पर इन मापदंडों का प्रभाव चित्र में दिखाया गया है। 3.

		गोल

चावल। 3. स्ट्रेच, रिपीट और राउंड पैरामीटर्स का उपयोग करने का परिणाम

उदाहरण

उदाहरण का परिणाम चित्र में दिखाया गया है। 4.

चावल। 4. फ़्रेम प्रकार

ऑब्जेक्ट मॉडल

एक वस्तु.style.borderImage

टिप्पणी

संस्करण 15.0 से पहले फ़ायरफ़ॉक्स -moz-border-image संपत्ति का समर्थन करता है।

संस्करण 6.0 से पहले सफारी, संस्करण 15.0 से पहले क्रोम, संस्करण 4.4 से पहले एंड्रॉइड -वेबकिट-बॉर्डर-इमेज प्रॉपर्टी का समर्थन करता है।

संस्करण 15.0 तक ओपेरा -ओ-बॉर्डर-इमेज प्रॉपर्टी का समर्थन करता है।

विनिर्देश

प्रत्येक विशिष्टता अनुमोदन के कई चरणों से गुजरती है।

• सिफ़ारिश - विनिर्देश को W3C द्वारा अनुमोदित किया गया है और एक मानक के रूप में अनुशंसित किया गया है।
• उम्मीदवार की सिफ़ारिश ( संभावित सिफ़ारिश) - मानक के लिए जिम्मेदार समूह संतुष्ट है कि वह अपने लक्ष्यों को पूरा करता है, लेकिन मानक को लागू करने के लिए विकास समुदाय से मदद की आवश्यकता होती है।
• प्रस्तावित सिफ़ारिश सुझाई गई सिफ़ारिश) - इस स्तर पर दस्तावेज़ अंतिम अनुमोदन के लिए W3C सलाहकार परिषद को प्रस्तुत किया जाता है।
• वर्किंग ड्राफ्ट - ड्राफ्ट का अधिक परिपक्व संस्करण जिस पर चर्चा की गई है और सामुदायिक समीक्षा के लिए संशोधन किया गया है।
• संपादक का मसौदा ( संपादकीय मसौदा) - परियोजना संपादकों द्वारा परिवर्तन किए जाने के बाद मानक का एक मसौदा संस्करण।
• मसौदा ( ड्राफ्ट विशिष्टता) - मानक का पहला मसौदा संस्करण।

बॉर्डर-इमेज एक ऐसी संपत्ति है जो आपको सेट करने की अनुमति देती है पृष्ठभूमि छवितत्व फ़्रेम के लिए. संपत्ति किसी दिए गए चित्र के साथ एक फ्रेम भरती है, छवि के हिस्सों को वितरित करती है ताकि कोने के हिस्से फ्रेम के कोनों में हों, और उनके बीच की जगह शेष छवि से भर जाए।

यह संपत्ति उन अविश्वसनीय चीज़ों को करना आसान बनाती है जिनके लिए पहले 3 से 8 चित्रों और मार्कअप में हेरफेर की आवश्यकता होती थी।

अद्यतन:फ़ायरफ़ॉक्स संस्करण 29 से शुरू होकर काम करता है।

चित्र का आकार फ़्रेम की मोटाई के बराबर है. फ़्रेम के रंग और शैली पर ध्यान नहीं दिया जाता है.

यदि आप केवल border-image-source सेट करते हैं, तो छवि कोनों में भर जाएगी, यह नहीं पता कि आगे क्या करना है:

बॉर्डर: 80px ठोस पारदर्शी; सीमा-छवि: यूआरएल ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

सीमा-छवि-टुकड़ा

एक महत्वपूर्ण गुण जो छवि के उस टुकड़े का आकार निर्धारित करता है जो फ़्रेम के कोनों को भर देगा। शेष हिस्सों का उपयोग बॉर्डर-इमेज-रिपीट में निर्दिष्ट एल्गोरिदम के अनुसार कोनों के बीच की जगह को भरने के लिए किया जाएगा।

संभावित मान:

<проценты>- छवि आकार के सापेक्ष गणना की गई। चौड़ाई के सापेक्ष क्षैतिज, ऊँचाई के सापेक्ष ऊर्ध्वाधर।<числа>-पिक्सेल (के लिए बिटमैप) या निर्देशांक (वेक्टर के लिए)। माप की इकाइयाँ इंगित नहीं की गई हैं। भरना - कीवर्ड, पिछले मूल्यों का पूरक। यदि निर्दिष्ट किया गया है, तो छवि फ़्रेम के अंदरूनी किनारे से नहीं कटती है, बल्कि फ़्रेम के अंदर के क्षेत्र को भी भर देती है। गोलाकार फ़्रेम के लिए बहुत उपयोगी.

प्रत्येक पक्ष के लिए मानों को परिभाषित करने के लिए, कई मानों को एक स्थान से अलग करके निर्दिष्ट किया जा सकता है।

विपरीत भुजाओं के मानों का योग चित्र के आकार से कम होना चाहिए, अन्यथा कोनों के बीच की जगह को भरने के लिए कुछ भी नहीं बचेगा।

बॉर्डर: 80px ठोस पारदर्शी; सीमा-छवि: यूआरएल ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); सीमा-छवि-स्लाइस: 100;

सीमा-छवि-दोहराएँ

संपत्ति यह निर्धारित करती है कि कोनों के बीच के अंतराल को कैसे भरा जाएगा।

संभावित मान: खिंचाव - छवि के भरने वाले क्षेत्र को फैलाता है। डिफ़ॉल्ट मान;

दोहराएँ - भरने वाले भाग को दोहराता है, जबकि कोने के चित्र वाले जोड़ दिखाई देते हैं; गोल - कोनों के बीच के अंतर को भरता है। साइड के बीच में एक सीवन दिखाई दे सकता है। सबसे सावधान कार्रवाई. अंतरिक्ष - दोहराने के समान कार्य करता है। मुझे कोई अंतर नहीं मिला.

सीमा-छवि: यूआरएल ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); सीमा-छवि-स्लाइस: 100; सीमा-छवि-दोहराएँ: दोहराएँ;

बायीं ओर दोहराव है, दायीं ओर गोल है।

यदि फ़्रेम जटिल है और किनारे एक साथ अच्छी तरह से फिट नहीं होते हैं, तो खिंचाव अधिक सही ढंग से काम करेगा, यहां एक उदाहरण दिया गया है।

सीमा-छवि-चौड़ाई

सीमा-छवि-चौड़ाई

संपत्ति फ़्रेम के दृश्य भाग की चौड़ाई को नियंत्रित करती है और उसे स्केल करती है। यदि यह मान सीमा-चौड़ाई से अधिक है, तो सीमा छवि सामग्री के नीचे क्रॉल हो जाएगी, भले ही भरण संपत्ति सेट न हो।

संभावित मान:<длина>- पीएक्स या ईएम में मान;<%>- छवि आकार के सापेक्ष प्रतिशत मान;<числа>- संख्यात्मक मान जिससे बॉर्डर-चौड़ाई ऑटो को गुणा किया जाता है - कीवर्ड। यदि दिया गया है, तो मान संबंधित बॉर्डर-इमेज-स्लाइस के बराबर है। यदि कोई उपयुक्त आकार नहीं है, तो सीमा-चौड़ाई मान का उपयोग किया जाता है, और छवि सामग्री के नीचे रेंगते हुए, फ्रेम के पूरे कोने को भर देती है। यह थोड़ा अजीब काम करता है.

बॉर्डर: 60px ठोस पारदर्शी; सीमा-छवि: यूआरएल ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); सीमा-छवि-स्लाइस: 80; सीमा-छवि-दोहराएँ: गोल; सीमा-छवि-चौड़ाई: 160px;

दाईं ओर बॉर्डर-इमेज-चौड़ाई वाला एक फ्रेम है। बाईं ओर का उदाहरण दिखाता है कि चित्र को फ़्रेम के अंदरूनी किनारों से कैसे क्रॉप किया गया था। बढ़ी हुई चौड़ाई के कारण, दाहिना फ़्रेम सामग्री के नीचे रेंग गया है।

सीमा-छवि-प्रारंभ

एक दिलचस्प संपत्ति जो आपको फ़्रेम को तत्व से बाहर ले जाने की अनुमति देती है। नकारात्मक मूल्यसमर्थित नहीं हैं.

संभावित मान:<длина>- पीएक्स या ईएम में मान;<числа>- वह संख्यात्मक मान जिससे सीमा-चौड़ाई को गुणा किया जाता है।

बॉर्डर: 60px ठोस पारदर्शी; सीमा-छवि: यूआरएल ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); सीमा-छवि-स्लाइस: 120; सीमा-छवि-दोहराएँ: गोल; बॉर्डर-इमेज-आउटसेट: 60px 10px 50px 120px;

दाईं ओर border-image-outset वाला एक उदाहरण है। यह गुण तत्व के आकार को प्रभावित नहीं करता है, और फ़्रेम आसन्न तत्वों को ओवरलैप कर सकता है।

सीमाएँ वे रेखाएँ हैं जो किसी तत्व को घेरती हैं (इसमें मौजूद सामग्री और इसके चारों ओर पैडिंग)। एक उदाहरण जिसका हम पहले ही सामना कर चुके हैं वह एक तालिका के अंदर सेल फ़्रेम है।

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

पहले बॉर्डर डिज़ाइन के बारे में बात करते हैं, फिर आगे बढ़ेंगे रूपरेखा.

सीमा चौड़ाई

सीमा की चौड़ाई निर्धारित करता है. यह स्पष्ट है कि डिफ़ॉल्ट रूप से तत्व चार तरफ फ़्रेम से घिरा हुआ है। संपत्ति आपको सीमाओं की चौड़ाई या तो सभी पक्षों के लिए समान या प्रत्येक पक्ष के लिए अलग-अलग निर्धारित करने की अनुमति देती है। किस सीमा को किस चौड़ाई को निर्दिष्ट करने की आवश्यकता है, इसके आधार पर, आप नियम में एक से चार मान निर्दिष्ट कर सकते हैं।

आप या तो सामान्य पिक्सेल, प्रतिशत और अन्य सीएसएस लंबाई इकाइयों का उपयोग करके या आरक्षित शब्दों का उपयोग करके चौड़ाई निर्धारित कर सकते हैं पतला(2पीएक्स), मध्यम(4px) और मोटा(6px).

बॉर्डर-चौड़ाई: 16px 12px 4px 8px;

झालर की शैली

सीमा शैली को परिभाषित करता है. ध्यान दें कि यदि आप यह नियम निर्धारित नहीं करते हैं बल्कि संपत्ति निर्दिष्ट करते हैं सीमा चौड़ाई, तो वहां कोई फ़्रेम नहीं होगा, इसलिए यदि आप दृश्यमान बॉर्डर चाहते हैं, तो निर्दिष्ट करना सुनिश्चित करें झालर की शैली.

एक संपत्ति के बहुत सारे मूल्य हो सकते हैं, उन सभी को नीचे दिए गए चित्र में स्पष्ट रूप से प्रदर्शित किया गया है।

अंतिम पैराग्राफ से पता चलता है कि प्रत्येक तरफ फ्रेम की मोटाई की तरह शैली भी अपनी हो सकती है:

बॉर्डर-शैली: ठोस डबल बिंदीदार कोई नहीं

सीमा रंग

पिछली संपत्तियों की तरह ही काम करता है, लेकिन बॉर्डर के रंग के लिए ज़िम्मेदार है। आप इसे एक से चार मानों तक भी सेट कर सकते हैं, और आपको परिणाम पहले से ही पता है। यदि नियम सेट नहीं है, तो फ़्रेम में वर्तमान तत्व का टेक्स्ट रंग होगा या, यदि यह निर्दिष्ट नहीं है, तो मूल तत्व का टेक्स्ट रंग होगा।

बॉर्डर-रंग: #C85EFA;

सीमा

आपको किसी तत्व के सभी तरफ सीमाओं के लिए सभी सूचीबद्ध गुणों को एक पंक्ति में सेट करने की अनुमति देकर कोड लिखना और सहेजना आसान बनाता है:

पी (बॉर्डर: 2px ठोस हरा;)

विभिन्न पक्षों पर फ़्रेम के लिए अलग-अलग नियम निर्धारित करने के लिए, आप निम्नलिखित मानों का उपयोग कर सकते हैं:

• बॉर्डर-शीर्ष- ऊपरी सीमा।
• बॉर्डर-दायां- सही।
• सीमा-नीचे- निचला।
• बॉर्डर-बायां- बाएं।

पी (बॉर्डर-बाएं: 6px बिंदीदार पीला;)

रूपरेखा-चौड़ाई

के समान सीमा चौड़ाई, केवल बाहरी फ़्रेम के लिए, आंतरिक फ़्रेम के लिए नहीं। रूपरेखा की मोटाई को समान मानों में सेट करता है सीमा चौड़ाई. तत्व के फ्रेम की मोटाई के अलावा, आपको इसकी शैली निर्दिष्ट करने की आवश्यकता है, अन्यथा कोई रूपरेखा नहीं होगी।

रूपरेखा शैली

संपत्ति मूल्य डुप्लिकेट मूल्य झालर की शैली. नियम बाहरी समोच्च की शैली निर्दिष्ट करता है।

विवरण

किसी तत्व के चारों ओर बॉर्डर शैली सेट करता है। किसी तत्व के विभिन्न पक्षों के लिए अलग-अलग शैलियाँ निर्धारित करने की अनुमति है।

वाक्य - विन्यास

सीमा-शैली: (1,4) | इनहेरिट

मान

बॉर्डर की उपस्थिति को नियंत्रित करने के लिए बॉर्डर-शैली संपत्ति के लिए कई मान प्रदान किए जाते हैं। उपस्थिति उपयोग किए गए ब्राउज़र और सीमा मोटाई सेट पर निर्भर करती है। तालिका में 1 शैलियों के नाम और परिणामी फ़्रेम दिखाता है जब विभिन्न अर्थमोटाई - 1, 3, 5 और 7 पिक्सेल।

तालिका में सूचीबद्ध मानों के अतिरिक्त, निम्नलिखित कीवर्ड का उपयोग किया जाता है।

कोई नहीं बॉर्डर प्रदर्शित नहीं करता है और इसकी मोटाई (बॉर्डर-चौड़ाई) शून्य पर सेट है। छुपी हुई तालिका कोशिकाओं पर सीमा-शैली को लागू करने के अलावा किसी अन्य के समान प्रभाव नहीं है, जिसमें सीमा-संक्षिप्त संपत्ति को पतन पर सेट किया गया है। इस स्थिति में, सेल के चारों ओर का बॉर्डर बिल्कुल भी प्रदर्शित नहीं होगा। विरासत माता-पिता का मूल्य विरासत में मिलती है।

आप रिक्त स्थान से अलग करके एक, दो, तीन या चार मानों का उपयोग कर सकते हैं। प्रभाव मात्रा पर निर्भर करता है और तालिका में दर्शाया गया है। 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी निभ यूइस्मोड टिनसीडंट यूटी लैक्रिट डोलोर मैग्ना एलिगुआम एराट वोलुटपैट।

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 1.

चावल। 1. बॉर्डर-शैली संपत्ति लागू करना

ऑब्जेक्ट मॉडल

document.getElementById("elementID").style.borderStyle

ब्राउज़र्स

ब्राउज़र इंटरनेट एक्सप्लोररछठे संस्करण तक, 1px की सीमा मोटाई के साथ, यह धराशायी के रूप में बिंदीदार प्रदर्शित होता है। 2px और अधिक की मोटाई के साथ, बिंदीदार मान सही ढंग से काम करता है। यह बग IE7 में ठीक कर दिया गया है, लेकिन केवल सभी 1px बॉर्डर के लिए। यदि किसी ब्लॉक बॉर्डर की मोटाई 2px या अधिक है, तो IE7 में बिंदीदार मान धराशायी में बदल जाता है।

7.0 तक और इसमें शामिल इंटरनेट एक्सप्लोरर संस्करण छुपे हुए और इनहेरिट मानों का समर्थन नहीं करते हैं।

ग्रूव, रिज, इनसेट या आउटसेट मानों का उपयोग करते समय बॉर्डर शैली ब्राउज़र के बीच थोड़ी भिन्न हो सकती है।