CSS border প্রপার্টি একটি এলিমেন্টের বর্ডার প্রপার্টি সংজ্ঞায়িত করতে ব্যবহৃত হয়। এটি border-width, border-style এবং border-color-এর একটি শর্টহ্যান্ড। পৃথক সাইডের বর্ডার স্টাইল করা যায় এবং border-radiusও নির্দিষ্ট করা যায়।
অন্যদিকে, CSS outline স্পেস নেয় না এবং বর্ডার সেট থাকলে তার চারদিকে প্রদর্শিত হয়। এটি offset সাপোর্ট করে। আরও, আমরা নির্দিষ্ট করতে পারি না কোন সাইডে আউटलাইন থাকবে কিনা।
ডিফল্টরূপে বর্ডার এবং আউटलাইন দুটোই প্রদর্শিত হয় না।
সিনট্যাক্স
CSS border এবং outline প্রপার্টির সিনট্যাক্স নিম্নরূপ:
Selector { border: /*মান*/ outline: /*মান*/ }
উদাহরণ
নিচের উদাহরণগুলো 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>
আউটপুট
এটি নিচের আউটপুট দেয়:
