outline-style प्रॉपर्टी को एलिमेंट के बॉर्डर्स के चारों ओर एक लाइन खींचने के लिए परिभाषित किया जा सकता है, लेकिन बॉर्डर प्रॉपर्टी के विपरीत आउटलाइन एलिमेंट के डायमेंशन्स का हिस्सा नहीं होती।
सिंटैक्स
CSS outline-style प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { outline-style: /*value*/ }
उदाहरण
आइए outline-style प्रॉपर्टी का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS outline-style</title> <style> span { margin: 15px; padding: 20px; border-style: solid; border-color: #dc3545; position: absolute; outline-width: 5px; outline-style: double; outline-color: orange; 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-style</title> <style> #container { width:50%; margin:50px auto; } p { margin:auto; border-style: ridge; border-width: 10px; border-color: lightblue; outline-style: dashed; outline-color: violet; } </style> </head> <body> <div id="container"> <p>Video Tutorials helps in understanding the technology with live running examples and practical implementation.</p> </div> </body></html>
आउटपुट
उपरोक्त कोड के लिए आउटपुट:
