خاصية لون الحدود
آخر تحديث: 2026-09-13
border-color خاصية لون الحدود
تحدد الخاصية border-color لون حدود العنصر. تقبل كل صيغ الألوان في CSS، بما في ذلك أسماء الألوان والقيم الست عشرية وrgb() وrgba() وhsl() وغيرها. عند استخدامها بمفردها، تؤثر في لون الحد فقط، لا في العرض أو النمط.
| الفئة | |
|---|---|
| القيمة الأولية | currentcolor |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | color |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
border-color: <color>{1,4};⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<color> | النوع | قيمة لون الحدود |
transparent | كلمة مفتاحية | حد شفاف |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تقبل border-color من 1 إلى 4 قيم لتتمكن من إعطاء كل حافة لوناً مختلفاً، مثل: border-color: red green blue orange.
تلميح： استخدم transparent لإنشاء حد غير مرئي، ويُستخدم غالباً لحجز مساحة حتى لا يزيح إضافة حد عند التمرير (hover) التخطيط.
❓ الأسئلة الشائعة
Qما القيمة الافتراضية لـ border-color؟
Aالقيمة الافتراضية هي currentcolor، أي أن الحد يستخدم تلقائياً لون نص العنصر الحالي (قيمة الخاصية color). لذلك إذا عيّنت border-width وborder-style فقط دون لون، يتبع الحد لون النص. لإبقاء الحد مستقلاً عن النص، حدّد لوناً صراحةً، مثل border-color: #333;.
Qكيف أعطي الحواف الأربعة ألواناً مختلفة؟
Aتقبل border-color من 1 إلى 4 قيم تُسنَد في اتجاه عقارب الساعة بدءاً من الأعلى: قيمة واحدة تلوّن الجوانب كلها، واثنتان تقابلان العلوي/السفلي واليسار/اليمين، وثلاث تقابل العلوي واليسار/اليمين والسفلي، وأربع تقابل الأعلى واليمين والأسفل واليسار. مثال: border-color: red green blue orange;. أو استخدم خصائص حسب الجانب مثل border-top-color للتحكم الدقيق.
Qما صيغ الألوان التي تدعمها border-color؟
Aكل صيغ ألوان CSS: الكلمات المفتاحية (red وtransparent)، والقيم الست عشرية (#9b59b6 و#f00)، وrgb()/rgba()، وhsl()/hsla()، وcurrentcolor. تنشئ rgba() حدوداً شبه شفافة، وtransparent عنصر نائب شفاف شائع، وتتيح hsla() ضبط قناة الألفا مع الحفاظ على اللون.
Qكيف أستخدم حداً شفافاً لمنع إزاحة التخطيط عند التمرير (hover)؟
Aأولاً احجز المساحة بـ border: 2px solid transparent;، ثم غيّر اللون فقط عند التمرير، مثل border-color: #3498db;. بما أن الحد موجود دائماً، لا يتغير حجم العنصر ولا يزيح التخطيط. هذه الحيلة القياسية لمنع الإزاحة في روابط التنقل والأزرار.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
