बाएं सीमा को नीचे-बाएं पिक्सेल पर नीचे की सीमा को ओवरलैप करने दें कैसे?

Question

मान लीजिए मैं निम्नलिखित सीएसएस टुकड़ा है:

div { 
    width: 200px; 
    padding: 10px; 
    border-width: 1px; 
    border-style: solid; 
    border-bottom-color: red; 
    border-left-color: blue; 
} 

बाईं सीमा नीले रंग है, निचले बॉर्डर लाल रंग है। लेकिन नीचे बाएं पिक्सेल, जहां बाएं और निचले सीमाएं ओवरलैप होती हैं, मेरे ब्राउज़र में लाल होती है। स्पष्ट रूप से नीचे की सीमा उस पिक्सेल पर बाएं सीमा को ओवरलैप करती है।

क्या मैं मैन्युअल रूप से ओवरलैप ऑर्डर सेट कर सकता हूं या किसी अन्य तरीके से पूरा कर सकता हूं कि बाएं-नीचे पिक्सेल लाल रंग के बजाय नीले रंग का रंग है?

Answer 1

नीचे-बाएं पिक्सेल का रंग आपके ब्राउज़र से संबंधित है, आप इसे ओवरराइड नहीं कर सकते हैं।

हालांकि, आप इस उन्नत स्थिति के लिए नेस्टेड divs का उपयोग कर सकते हैं। इस प्रयास करें:

div.parent { 
    width: 200px; 
    border-width: 1px; 
    border-style: solid; 
    border-left-color: blue; 
} 

div.child { 
    width: 200px; 
    padding: 10px; 
    border-width: 1px; 
    border-style: solid; 
    border-bottom-color: red; 
} 

और अपने HTML है:

<div class="parent"> 
    <div class="child"> 
     Your content will appear correctly. 
    </div> 
</div>