Outline শর্টহ্যান্ড প্রপার্টি ব্যবহার করে একটি এলিমেন্টের বর্ডারের চারপাশে নির্দিষ্ট শৈলী (প্রয়োজনীয়), মোটা এবং রঙের লাইন আঁকা যায়, কিন্তু আউटलাইন বর্ডার প্রপার্টির মতো এলিমেন্টের ডাইমেনশনের অংশ নয়।
সিনট্যাক্স
CSS outline শর্টহ্যান্ড প্রপার্টির সিনট্যাক্স:
Selector { outline: /*value*/ }
উদাহরণ
outline শর্টহ্যান্ড প্রপার্টির উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS outline Shorthand</title> <style> span { margin: 15px; padding: 20px; border-style: solid; border-color: #f28500 #dc3545; position: absolute; outline: 5px double green; border-radius: 50%; } #showDiv { margin:auto; border-style: solid; border-color: darkmagenta dodgerblue; outline: groove black; height: 80px; width: 80px; } #container { width:50%; margin:50px auto; } </style> </head> <body> <div id="container"> <div id="showDiv"><span></span></div> </div> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
উদাহরণ
outline শর্টহ্যান্ড প্রপার্টির আরেকটি উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS outline Shorthand</title> <style> #container { width:50%; margin:50px auto; } p { margin:auto; border-style: ridge; border-width: 10px; border-color: orange; outline: 5px dashed yellow; } </style> </head> <body> <div id="container"> <p>Coding Ground is loved by millions of programmers around the globe.</p> </div> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
