आउटलाइन शॉर्टहैंड प्रॉपर्टी को एलिमेंट के बॉर्डर्स के चारों ओर एक विशिष्ट शैली (आवश्यक), मोटाई, और रंग की लाइन खींचने के लिए परिभाषित किया जा सकता है, लेकिन बॉर्डर प्रॉपर्टी के विपरीत आउटलाइन एलिमेंट के डायमेंशन्स का हिस्सा नहीं होती।
सिंटैक्स
CSS outline शॉर्टहैंड प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { outline: /*value*/ }
उदाहरण
आइए आउटलाइन शॉर्टहैंड प्रॉपर्टी का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS outline Shorthand</title> <style> span { margin: 15px; padding: 20px; border-style: solid; border-color: #f28500 #dc3545; position: absolute; outline: 5px double green; border-radius: 50%; } #showDiv { margin:auto; border-style: solid; border-color: darkmagenta dodgerblue; outline: groove 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>
आउटपुट
उपरोक्त कोड के लिए आउटपुट:
एक और उदाहरण
आइए आउटलाइन शॉर्टहैंड प्रॉपर्टी का एक और उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS outline Shorthand</title> <style> #container { width:50%; margin:50px auto; } p { margin:auto; border-style: ridge; border-width: 10px; border-color: orange; outline: 5px dashed yellow; } </style> </head> <body> <div id="container"> <p>Coding Ground is loved by millions of programmers around the globe.</p> </div> </body> </html>
आउटपुट
उपरोक्त कोड के लिए आउटपुट:
