خاصية عرض الحدود
آخر تحديث: 2026-09-13
border-width خاصية عرض الحدود
تحدد الخاصية border-width سُمك حدود العنصر. يمكنك استخدام الكلمات المفتاحية المعرّفة مسبقاً thin وmedium وthick، أو قيم طول صريحة مثل px أو em. عند استخدامها بمفردها، تتحكم في العرض فقط، وتترك النمط واللون دون تغيير.
| الفئة | |
|---|---|
| القيمة الأولية | medium |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | length |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
border-width: thin | medium | thick | <length>{1,4};⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
thin | medium | thick | كلمة مفتاحية | كلمات مفتاحية معرّفة مسبقاً لعرض الحدود |
<length> | النوع | عرض حدود صريح |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تقبل الخاصية border-width من 1 إلى 4 قيم للحواف العلوية واليمنى والسفلية واليسرى، وفقاً لنفس قواعد margin وpadding.
❓ الأسئلة الشائعة
Qكم بكسل تساوي thin وmedium وthick؟
Aلا تُعرّف المواصفات أحجاماً دقيقة بالبكسل لهذه الكلمات المفتاحية — كل متصفح يطبّقها بشكل مختلف قليلاً. عملياً، medium تبلغ نحو 3–4px (وهي أيضاً عرض الحدود الافتراضي)، وthin نحو 1px، وthick نحو 5–6px. قد يختلف العرض بين المتصفحات، لذا استخدم قيمة طول صريحة مثل 2px عند الحاجة إلى تحكم دقيق.
Qلماذا لا تظهر الحدود رغم أنني عيّنت border-width؟
Aلأن القيمة الافتراضية لـ border-style هي none — فبدون نمط لا تُرسم أي حدود مهما كان العرض. يجب أيضاً تعيين border-style (مثل solid) ولون لتكتمل العناصر الثلاثة. رتّب عملية التنقيح: أكّد أولاً border-style، ثم تحقق من أن border-width ليس 0، وأخيراً تحقق من اللون.
Qماذا تعني قيم border-width من 1 إلى 4؟
Aتتبع نفس قواعد margin وpadding تماماً: قيمة واحدة تُطبَّق على الجوانب الأربعة؛ وقيمتان تقابلان العلوي/السفلي واليسار/اليمين؛ وثلاث قيم تقابل العلوي، اليسار/اليمين، والسفلي؛ وأربع قيم تُطبَّق في اتجاه عقارب الساعة بدءاً من الأعلى (أعلى، يمين، أسفل، يسار). على سبيل المثال، border-width: 2px 4px يعطي 2px أعلى/أسفل و4px يسار/يمين، أو استخدم border-top-width وما شابهها لجانب واحد.
Qهل تدعم border-width النسب المئوية؟
Aلا. تقبل border-width فقط الكلمات المفتاحية thin وmedium وthick أو وحدات الطول (px وem وrem وvw وcalc() وغيرها)؛ وتُعامل القيم بالنسب المئوية كإعلانات غير صالحة وتُتجاهل. الوحدات النسبية مثل em/rem تتناسب مع حجم الخط، مما يناسب التخطيطات المتجاوبة؛ استخدم px عند الحاجة إلى سُمك ثابت.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
