आउटलाइन स्पेस नहीं लेती और यदि बॉर्डर सेट है तो उसके चारों ओर डिस्प्ले होती है। इसका उपयोग एलिमेंट्स को हाइलाइट करने के लिए किया जाता है और हम स्पेसिफाई नहीं कर सकते कि इंडिविजुअल साइड्स में आउटलाइन होनी चाहिए या नहीं। बॉर्डर्स की तरह, आउटलाइन डिफ़ॉल्ट रूप से डिस्प्ले नहीं होती। कुछ ब्राउज़र्स में, जैसे Firefox, फोकस्ड एलिमेंट्स एक पतली आउटलाइन के साथ डिस्प्ले होते हैं।
बॉर्डर्स को अधिक विस्तार से कस्टमाइज़ किया जा सकता है। हम बॉर्डर की इंडिविजुअल साइड्स को स्टाइल कर सकते हैं और उनके किनारों को राउंड कर सकते हैं। बॉर्डर्स स्पेस लेते हैं और बॉक्स-साइज़िंग को प्रभावित करते हैं।
सिंटैक्स
CSS border प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { border: /*value*/ outline: /*value*/ }उदाहरण
निम्नलिखित उदाहरण CSS आउटलाइन और बॉर्डर प्रॉपर्टी को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> p { display: flex; float: left; margin: 20px; padding: 12px; width: 30%; outline: thin dotted; background-color: lavender; } p + p { width: 250px; outline: none; border: outset; } </style> </head> <body> <h2>Learning is fun</h2> <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p> <p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
उदाहरण
<!DOCTYPE html> <html> <head> <style> article { margin: auto; width: 70%; outline: thick double; background-color: lightgoldenrodyellow; } h3 { border: inset; } </style> </head> <body> <h3>Kotlin Tutorial</h3> <article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
