CSS border प्रॉपर्टी का उपयोग किसी एलिमेंट के लिए बॉर्डर प्रॉपर्टीज को परिभाषित करने के लिए किया जाता है। यह border-width, border-style और border-color के लिए एक शॉर्टहैंड है। व्यक्तिगत पक्षों के लिए बॉर्डर स्टाइल किए जा सकते हैं और border-radius भी निर्दिष्ट किया जा सकता है।
दूसरी ओर, CSS outline जगह नहीं लेता और यदि बॉर्डर सेट है तो उसके चारों ओर प्रदर्शित होता है। यह ऑफसेट सपोर्ट करता है। इसके अलावा, हम यह निर्दिष्ट नहीं कर सकते कि व्यक्तिगत पक्षों पर आउटलाइन होनी चाहिए या नहीं।
डिफ़ॉल्ट रूप से, बॉर्डर और आउटलाइन दोनों प्रदर्शित नहीं होते हैं।
सिंटैक्स
CSS border और outline प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { border: /*value*/ outline: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण CSS border और outline प्रॉपर्टी को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> div { margin: 15px; padding: 20px; width: 35%; border: thin solid green; outline-width: 5px; outline-style: ridge; outline-color: fuchsia; border-radius: 50px; } </style> </head> <body> <h2>Example</h2> <div>This is it!</div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> p { margin: 40px; padding: 12px; width: 30%; border: thick dashed green; outline: 5px inset; outline-color: fuchsia; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text surrounded by border and outline.</p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
