CSS में बॉर्डर्स और आउटलाइन्स पर कलर प्रॉपर्टी का प्रभाव

हम किसी एलिमेंट के लिए बॉर्डर कलर और आउटलाइन कलर परिभाषित कर सकते हैं। बॉर्डर्स के विपरीत, आउटलाइन कोई स्पेस नहीं लेती। border-color प्रॉपर्टी का उपयोग किसी एलिमेंट के बॉर्डर कलर को सेट करने के लिए किया जाता है और outline-color प्रॉपर्टी का उपयोग इसके आउटलाइन कलर को सेट करने के लिए किया जाता है।

सिंटैक्स

CSS border-color और outline-color प्रॉपर्टी का सिंटैक्स निम्नलिखित है:

/*बॉर्डर कलर सेट करने के लिए*/ Selector { border-color: /*value*/ } /*आउटलाइन कलर सेट करने के लिए*/ Selector { outline-color: /*value*/ }

निम्नलिखित उदाहरण CSS border-color और outline-color प्रॉपर्टी को दर्शाते हैं:

उदाहरण

<!DOCTYPE html> <html> <head> <style> span { margin: 15px; padding: 20px; border-style: solid; border-color: limegreen crimson; position: absolute; outline-width: 5px; outline-style: ridge; outline-color: orange; top: 15px; border-radius: 50%; } div { margin: auto; border-style: solid; border-color: darkmagenta dodgerblue; outline-style: dotted; outline-color: black; height: 80px; width: 80px; } </style> </head> <body> <div><span></span></div> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देता है:

उदाहरण

<!DOCTYPE html> <html> <head> <style> p { border-width: 5px; border-style: ridge; border-color: lightblue; outline-style: solid; outline-color: darkviolet; } </style> </head> <body> <h2>Exams Timings</h2> <p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देता है: