CSS বর্ডার প্রপার্টি একটি এলিমেন্টের বর্ডার প্রোপার্টি নির্ধারণ করতে ব্যবহৃত হয়। এটি সীমানা-প্রস্থ, সীমানা-শৈলী এবং সীমানা-রঙের জন্য একটি সংক্ষিপ্ত বিবরণ। পৃথক পক্ষের জন্য সীমানা স্টাইল করা যেতে পারে এবং একটি সীমানা-ব্যাসার্ধও নির্দিষ্ট করা যেতে পারে।
অন্যদিকে, CSS আউটলাইন স্থান নেয় না এবং সেট করা থাকলে সীমানার চারপাশে প্রদর্শিত হয়। এটি অফসেট সমর্থন করে। উপরন্তু, পৃথক পক্ষের একটি রূপরেখা থাকা উচিত কিনা তা আমরা নির্দিষ্ট করতে পারি না।
ডিফল্টরূপে, উভয় সীমানা এবং রূপরেখা প্রদর্শিত হয় না৷
সিনট্যাক্স
CSS বর্ডার এবং আউটলাইন প্রপার্টির সিনট্যাক্স নিম্নরূপ -
Selector {
border: /*value*/
outline: /*value*/
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি CSS সীমানা এবং আউটলাইন সম্পত্তি −
চিত্রিত করে<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
