আউটলাইন জায়গা নেয় না এবং সেট করা থাকলে সীমানার চারপাশে প্রদর্শিত হয়। এটি উপাদানগুলিকে হাইলাইট করার জন্য ব্যবহৃত হয় এবং আমরা নির্দিষ্ট করতে পারি না যে পৃথক পক্ষের একটি রূপরেখা থাকা উচিত কিনা। সীমানাগুলির মতো, রূপরেখা ডিফল্টরূপে প্রদর্শিত হয় না। কিছু ব্রাউজারে, ফায়ারফক্স বলুন, ফোকাস করা উপাদানগুলি একটি পাতলা আউটলাইনের সাথে প্রদর্শিত হয়।
সীমানা একটি বৃহত্তর পরিমাণে কাস্টমাইজ করা যেতে পারে. আমরা একটি সীমানার পৃথক দিক স্টাইল করি এবং তাদের প্রান্তগুলিকে বৃত্তাকার করি। সীমানা স্থান নেয় এবং বাক্সের আকারকে প্রভাবিত করে।
সিনট্যাক্স
CSS বর্ডার প্রপার্টির সিনট্যাক্স নিম্নরূপ -
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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
