Outline में जगह नहीं होती है और अगर सेट किया जाता है तो इसे बॉर्डर के आसपास दिखाया जाता है। इसका उपयोग तत्वों को हाइलाइट करने के लिए किया जाता है और हम यह निर्दिष्ट नहीं कर सकते कि अलग-अलग पक्षों की रूपरेखा होनी चाहिए या नहीं। सीमाओं की तरह, रूपरेखा डिफ़ॉल्ट रूप से प्रदर्शित नहीं होती है। कुछ ब्राउज़रों में, जैसे फ़ायरफ़ॉक्स, फ़ोकस किए गए तत्वों को एक पतली रूपरेखा के साथ प्रदर्शित किया जाता है।
सीमाओं को अधिक हद तक अनुकूलित किया जा सकता है। हम एक सीमा के अलग-अलग पक्षों को स्टाइल करते हैं और उनके किनारों को गोल करते हैं। सीमाएं जगह लेती हैं और बॉक्स-आकार को प्रभावित करती हैं।
सिंटैक्स
CSS बॉर्डर प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
border: /*value*/
outline: /*value*/
} उदाहरण
निम्नलिखित उदाहरण सीएसएस की रूपरेखा और सीमा संपत्ति को दर्शाते हैं -
<!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> आउटपुट
यह निम्न आउटपुट देता है -
