عرض مرز در CSS

ویژگی border-width در CSS برای تعیین ضخامت چهار طرف مرز یک عنصر استفاده می‌شود.

عرض مرز را می‌توان به‌صورت یکی از موارد زیر تنظیم کرد:

• یک مقدار عددی مشخص با واحدهایی مانند px (پیکسل)، pt (پوینت)، cm (سانتی‌متر)، em (واحد نسبی متن) و غیره

• یا با استفاده از سه مقدار از پیش تعریف‌شده: thin (نازک)، medium (متوسط)، یا thick (ضخیم)

مثال: نمایش انواع عرض مرز

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;
}

نتیجه اجرای کد بالا:

• مرز با ضخامت ۵ پیکسل

• مرز با ضخامت متوسط (medium)

• مرز نقطه‌چین با ضخامت ۲ پیکسل

• مرز نقطه‌چین با ضخامت زیاد (thick)

تعیین عرض مرز برای هر طرف به‌صورت جداگانه

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

مثال:

p.one {
  border-style: solid;
  border-width: 5px 20px; /* ۵ پیکسل برای بالا و پایین، ۲۰ پیکسل برای چپ و راست */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* ۲۰ پیکسل برای بالا و پایین، ۵ پیکسل برای چپ و راست */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* ۲۵ پیکسل بالا، ۱۰ پیکسل راست، ۴ پیکسل پایین، ۳۵ پیکسل چپ */
}

🔹 نکته: ترتیب مقادیر در border-width به این صورت است:

1. یک مقدار → همه طرف‌ها یکسان

2. دو مقدار → بالا و پایین | چپ و راست

3. سه مقدار → بالا | چپ و راست | پایین

4. چهار مقدار → بالا | راست | پایین | چپ