outline-color प्रॉपर्टी को एलिमेंट के बॉर्डर्स के चारों ओर एक विशिष्ट रंग की लाइन खींचने के लिए परिभाषित किया जा सकता है, लेकिन बॉर्डर प्रॉपर्टी के विपरीत आउटलाइन एलिमेंट के डायमेंशन्स का हिस्सा नहीं होती।
सिंटैक्स
CSS outline-color प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { outline-color: /*value*/ }
नोट: outline-color घोषित करने से पहले outline-style प्रॉपर्टी को परिभाषित करने की आवश्यकता होती है।
उदाहरण
आइए outline-color प्रॉपर्टी का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS outline-color</title> <style> span { margin: 15px; padding: 20px; border-style: solid; border-color: #f28500 #dc3545; position: absolute; outline-width: 5px; outline-style: double; outline-color: green; border-radius: 50%; } #showDiv { margin:auto; border-style: solid; border-color: darkmagenta dodgerblue; outline-style: groove; outline-color: black; height: 80px; width: 80px; } #container { width:50%; margin:50px auto; } </style> </head> <body> <div id="container"> <div id="showDiv"><span></span></div> </div></body></html>
आउटपुट
उपरोक्त कोड के लिए आउटपुट:
एक और उदाहरण
आइए outline-style प्रॉपर्टी का एक और उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS outline-color</title> <style> #container { width:50%; margin:50px auto; } p { margin:auto; border-style: ridge; border-width: 10px; border-color: lightblue; outline-style: dashed; outline-width: 5px; outline-color: violet; } </style> </head> <body> <div id="container"> <p>Reach millions of professionals with video tutorials.</p> </div> </body> </html>
आउटपुट
उपरोक्त कोड के लिए आउटपुट:
