شرح شامل لخاصية border width في CSS مع كل القيم والتوزيعات

شرح شامل لخاصية CSS border-width مع كل القيم والتوزيعات

في هذا المقال، هنتعرّف على خاصية border-width في CSS، اللي بتتحكم في سمك الحدود حول العناصر. نعطي أمثلة عملية لكل القيم المتاحة، وشرح كامل لكيفية توزيع القيم على الجوانب المختلفة.

1. تعريف خاصية border-width

تُستخدم هذه الخاصية لتحديد سمك حدود العنصر الأربعة، لكن لا يمكن أن تظهر الحدود بدون تحديد border-style أولاً.

2. القيم الأساسية

thin — حدود رفيعة جدًا.
medium — القيمة الافتراضية، تعتمد على المتصفح.
thick — حدود سميكة.

div { border-style: solid; border-width: thin; }

3. القيم المخصصة

يمكن استخدام وحدات قياس مثل:

px (مثلاً: 5px)
em (مثلاً: 0.5em)
وحدات أخرى مثل pt، cm، الخ.

p { border-style: dashed; border-width: 10px; }

4. توزيع القيم على الجوانب

الخاصية تدعم من قيمة واحدة إلى أربع قيم:

قيمة واحدة: تطبق على الأربع جوانب.
قيمتان: الأولى للأعلى والأسفل، التانية لليمين واليسار.
ثلاث قيم: الأولى للأعلى، الثانية لليمين واليسار، الثالثة للأسفل.
أربع قيم: مطبّقة كما في الكتابة القصيرة (Top, Right, Bottom, Left).

/* قيمة واحدة */
p { border-style: solid; border-width: 5px; }

/* قيمتين */
p { border-style: solid; border-width: 10px 5px; }

/* ثلاث قيم */
p { border-style: solid; border-width: 10px 5px 2px; }

/* أربع قيم */
p { border-style: solid; border-width: 10px 5px 2px 1px; }

خصيصة border-top-width

تُستخدم border-top-width للتحكم في سمك الحد العلوي فقط. تذكّر أن ظهور الحد يتطلب وجود border-style (مثل solid).

القيم المسموح بها

thin — حد علوي رفيع
medium — القيمة المتوسطة (افتراضية في المتصفحات)
thick — حد علوي سميك
<length> مثل 2px، 0.25rem، 3pt، 1mm … إلخ (بدون نسب مئوية)

أمثلة عملية

/* تأكد من تحديد الـ style */
.box { border-style: solid; }

/* 1) طول محدد للحد العلوي فقط */
.box { border-top-width: 12px; }

/* 2) كلمات جاهزة */
.box-thin   { border-style: solid; border-top-width: thin; }
.box-medium { border-style: solid; border-top-width: medium; }
.box-thick  { border-style: solid; border-top-width: thick; }

/* 3) الجمع بين shorthand والـ longhand */
.card { border: 4px dashed #888; border-top-width: 10px; }

/* 4) جعل الحد العلوي أعرض من باقي الجوانب */
.panel {
  border-style: solid;
  border-width: 2px;      /* كل الجوانب 2px */
  border-top-width: 8px;  /* العلوي فقط 8px */
}

/* 5) وحدات مختلفة */
.note { border-style: solid; border-top-width: 0.5rem; }

العلاقة مع border-top (shorthand)

خاصية border-top هي كتابة مختصرة تُحدد: border-top-width + border-top-style + border-top-color.

.hero { border-top: 8px solid crimson; }

ملاحظات مهمة

استخدام border-width مع قيمة عامة ثم border-top-width يسمح بتخصيص العلوي فقط.
لو حدث تعارض، آخر تعريف في ترتيب CSS هو اللي بينفّذ (قاعدة الكاسكيد).
النسب المئوية غير مدعومة لعرض الحدود؛ استخدم وحدات طول أو الكلمات الجاهزة.

5. ملاحظات إضافية

يجب أن تسبق border-width بـ border-style.
القيم المعتمدة مثل medium يمكن أن تختلف عرضيًا بين المتصفحات.

الخاتمة

تُعدّ خاصية border-width من الخصائص البسيطة لكنها أساسية. بمجرد تحديدها بالطريقة الصحيحة وباستخدام توزيع القيم، يمكنك التحكم الكامل بشكل حدود موقعك بكل احترافية.