خاصية Border (اختصار)
آخر تحديث: 2026-09-13
border خاصية Border (اختصار)
تُعد خاصية border (الاختصار) من أكثر الخصائص استخدامًا في CSS، إذ تتيح تعيين عرض الحدود ونمطها ولونها لعنصر في إعلان واحد. يحيط الحد بالمحتوى داخل الحشو مباشرة، وهو جزء أساسي من نموذج الصندوق. باستخدام border يمكنك إعطاء أي عنصر بسرعة مخططًا مرئيًا.
| الفئة | |
|---|---|
| القيمة الأولية | medium none currentcolor |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | shadow |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
border: <border-width> || <border-style> || <color>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<border-width> || <border-style> || <color> | القيمة | اختصار لعرض الحدود ونمطها ولونها. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يضبط اختصار border الجوانب الأربعة دفعة واحدة. ولتنسيق جانب واحد، استخدم border-top أو border-right أو border-bottom أو border-left.
تحذير： يُعيد اختصار border ضبط أي border-width أو border-style أو border-color مضبوطة سابقًا. إذا كنت تحتاج فقط إلى تغيير أحدها، ففضّل الخاصية المفصّلة المقابلة.
❓ الأسئلة الشائعة
Qما الفرق بين border و outline؟
Aيُعد border جزءًا من نموذج الصندوق ويُرسم حول المحتوى والحشو، لذا يشغل مساحة ويؤثر في حجم العنصر وتخطيطه. أما outline فتُرسم خارج الحدود، لا تشغل مساحة ولا تؤثر في التخطيط، مما يجعلها مثالية لمؤشرات التركيز بلوحة المفاتيح. استخدم border للحدود الزخرفية و outline للإشارات المرئية دون مساحة، خاصة لحالات التركيز.
Qلماذا لا أرى حدودًا بعد تعيينها؟
Aالسبب الأكثر شيوعًا هو نسيان تعيين border-style. قيمتها الافتراضية none، لذا يجب عليك تحديد نمط صراحةً (مثل solid أو dashed) لكي تظهر الحدود. وتحقق أيضًا من أن border-width ليست 0 وأنه لا توجد قاعدة أخرى تلغي اللون. والحل الأبسط هو استخدام اختصار border لضبط الثلاثة دفعة واحدة.
Qهل يهم ترتيب القيم الثلاث في اختصار border؟
Aلا يوجد شرط صارم — يحدد المتصفح القيم حسب نوعها تلقائيًا — لكن الترتيب المعتاد هو العرض ثم النمط ثم اللون، مثلًا border: 1px solid #ccc;. لاحظ أن حذف النمط يفترض none (لا حدود مرئية)، وحذف اللون يفترض currentcolor (لون النص). والحفاظ على ترتيب متسق يجعل الكود أسهل صيانةً.
Qكيف أضبط حدودًا مختلفة على الجوانب الأربعة؟
Aاستخدم الاختصارات لكل جانب border-top و border-right و border-bottom و border-left، أو اضبط الحدود كاملة أولًا ثم تجاوز الجوانب الفردية. على سبيل المثال، border: 1px solid #ddd; border-bottom: 3px solid #e74c3c; ينتج حدًا سفليًا بارزًا مع حدود عادية على الجوانب الثلاثة الأخرى.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
