outline-width प्रॉपर्टी को एलिमेंट के बॉर्डर्स के चारों ओर एक विशिष्ट मोटाई की लाइन खींचने के लिए परिभाषित किया जा सकता है, लेकिन आउटलाइन बॉर्डर प्रॉपर्टी के विपरीत एलिमेंट के डायमेंशन्स का हिस्सा नहीं होती।
सिंटैक्स
CSS outline-width प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { outline-width: /*value*/ }नोट - outline-width घोषित करने से पहले outline-style प्रॉपर्टी को परिभाषित करने की आवश्यकता होती है।
उदाहरण
आइए outline-width प्रॉपर्टी के लिए एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <title>CSS outline-width</title> <style> span { margin: 15px; padding: 20px; border-style: solid; border-color: limegreen crimson; position: absolute; outline-width: 5px; outline-style: ridge; outline-color: orange; border-radius: 50%; } #showDiv { margin:auto; border-style: solid; border-color: darkmagenta dodgerblue; outline-style: dotted; 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-width प्रॉपर्टी का एक और उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <title>CSS outline-width</title> <style> #container { width:50%; margin:50px auto; } p { margin:auto; border-style: ridge; border-width: 15px; border-color: lightblue; outline-style: solid; outline-color: darkviolet; } </style> </head> <body> <div id="container"> <p>Learning is fun with examples and live running code.</p> </div></body></html>आउटपुट
उपरोक्त कोड के लिए आउटपुट निम्नलिखित है:
