عرض کادر در CSS (Border Width)

در این راهنما «عرض کادر (Border Width)» را یاد می گیرید. این ویژگی ضخامت چهار سمت کادر را مشخص می کند و می تواند با اندازه دقیق یا مقادیر ازپیش تعریف شده نوشته شود.

تعریف «عرض کادر» (Border Width) و مقادیر آن

ویژگی border-width عرض کادر را تعیین می کند. مقدار آن می تواند عددی با واحدهایی مثل px، pt، cm، em باشد یا یکی از سه مقدار thin، medium یا thick. برای اثرگذاری، ابتدا باید border-style را تنظیم کنید.

نمونه عرض های متفاوت

p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; }

نکته: بدون تعیین border-style هیچ تغییری در نمایش عرض کادر نخواهید دید.

عرض کادر برای کناره ها (یک تا چهار مقدار)

می توانید border-width را با یک تا چهار مقدار بنویسید تا به ترتیب برای بالا، راست، پایین و چپ اعمال شود.

نمونه کاربردی کناره ها

p.one { border-style: solid; border-width: 5px 20px; /* 5px بالا و پایین، 20px چپ و راست */ } p.two { border-style: solid; border-width: 20px 5px; /* 20px بالا و پایین، 5px چپ و راست */ } p.three { border-style: solid; border-width: 25px 10px 4px 35px; /* 25px بالا، 10px راست، 4px پایین، 35px چپ */ }

هشدار: ترتیب مقادیر اهمیت دارد؛ چهار مقدار به ترتیب برای بالا، راست، پایین و چپ هستند.

مسیر ادامه یادگیری

پس از «عرض کادر»، برای تکمیل موضوعات کادر به این صفحات سر بزنید: کادرها در CSS، رنگ کادر، کادرِ کناره ها، کوتاه نویسی کادر و حاشیه گرد.

راهنمای border-width در MDN را برای جزئیات بیشتر بخوانید و تعریف رسمی را در استاندارد W3C بررسی کنید.