الحدود Outline, Border

في عالم تصميم الويب، العناصر بدون حدود تبدو عائمة وتائهه. الحدود (Borders) هي التي تعطي للعنصر هيكله، وتفصله عن جيرانه، وتبرز محتواه. تخيل لوحة فنية ثمينة بدون إطار خشبي يحيط بها؛ ستفقد الكثير من قيمتها وجمالها.

في هذا الدرس الدسم، سنتعلم كل شيء عن خاصية border التي تحجز مساحة فعلية في الصفحة، وخاصية outline التي ترسم خطاً دون أن تؤثر على تصميم الصفحة. سنتعلم كيف نحول المربعات إلى دوائر، وكيف نصنع مثلثات باستخدام الحدود فقط (نعم، مثلثات!)، ولماذا يعتبر الـ Outline صديقاً لذوي الاحتياجات الخاصة. استعد لدرس مليء بالأشكال والأكواد.

1. تشريح الإطار (Border): المكونات الثلاثة

لكي يظهر الإطار، لا يكفي أن تقول للمتصفح "ارسم إطاراً". يجب أن تحدد له 3 معلومات أساسية (الثالوث المقدس للإطارات). إذا نسيت واحدة منها (خاصة النمط)، لن يظهر الإطار أبداً.

المكونات الثلاثة (Width, Style, Color)

1. سُمك الإطار (border-width): كم عرض الخط؟ (مثلاً 5px, thick, thin).
2. نمط الإطار (border-style): كيف شكل الخط؟ (متصل، منقط، مزدوج...). هذا أهم جزء! بدونه القيمة الافتراضية هي none ولن يظهر شيء.
3. لون الإطار (border-color): ما هو لونه؟ (أحمر، أزرق، هيكس كود...).

الاختصار السريع (Shorthand)

بدلاً من كتابة 3 أسطر، نكتب سطراً واحداً يجمعهم. الترتيب المعتاد هو: السُمك ثم النمط ثم اللون.

border: 5px solid red;

مثال: الطريقة الطويلة vs المختصرة


/* الطريقة الطويلة والمملة */
.box-1 {
    border-width: 3px;
    border-style: solid;
    border-color: blue;
}

/* الطريقة المختصرة والاحترافية (نفس النتيجة) */
.box-2 {
    border: 3px solid blue;
}

2. أنواع نمط الإطار (Border Styles) بالتفصيل

خاصية border-style تمتلك قيماً كثيرة جداً، بعضها بسيط وبعضها يعطي تأثيرات ثلاثية الأبعاد (3D). دعنا نستعرضها جميعاً.

النمط (Style)	الوصف (Description)	الاستخدام الشائع
`solid`	خط متصل (مستمر).	الأكثر استخداماً (90% من الحالات).
`dashed`	خط متقطع (شرطات - - -).	لمناطق السحب والإفلات (Drag & Drop) أو الكوبونات.
`dotted`	خط منقط (نقاط . . .).	للإطارات الخفيفة أو التزيين.
`double`	خط مزدوج (خطين متوازيين).	يتطلب `width` لا يقل عن 3px ليظهر بوضوح.
`none`	لا يوجد إطار.	يستخدم لإزالة الإطار الافتراضي للأزرار وحقول الإدخال.
`groove`	محفور (3D).	يبدو وكأنه محفور داخل الشاشة.
`ridge`	بارز (3D).	عكس groove، يبدو بارزاً للخارج.
`inset`	غائر (3D).	يجعل العنصر بالكامل يبدو مضغوطاً للداخل (زر مضغوط).
`outset`	نافر (3D).	يجعل العنصر يبدو بارزاً للخارج (زر غير مضغوط).

أمثلة بصرية للأنماط


.solid-border { border-style: solid; }
.dashed-border { border-style: dashed; }
.dotted-border { border-style: dotted; }
.double-border { border-width: 5px; border-style: double; } /* لاحظ زيادة السمك */

3. التحكم في الجهات والزوايا (Border Radius)

هل تعلم أنك لست مضطراً لوضع إطار من الجوانب الأربعة؟ وهل تعلم أن الإطارات لا يشترط أن تكون زواياها حادة؟

أ. إطارات لجهات محددة

يمكنك تحديد إطار لجهة واحدة فقط، وهذا شائع جداً في تصميم الروابط أو القوائم.

border-bottom: 2px solid red; (خط تحت الكلام فقط).
border-left: 5px solid green; (خط سميك على اليسار للتمييز).

ب. تدوير الزوايا (Border Radius) - سحر الدوائر

خاصية border-radius هي التي حولت الويب من مربعات حادة ومملة إلى تصميمات ناعمة وعصرية. هي تقوم بقص زوايا العنصر.

تدوير بسيط: border-radius: 10px; (زوايا ناعمة للأزرار والبطاقات).
دائرة كاملة: border-radius: 50%; (بشرط أن يكون العنصر مربعاً، أي طوله يساوي عرضه).
شكل كبسولة: border-radius: 999px; (للأزرار البيضاوية).

كيف تصنع دائرة في CSS؟


.avatar-circle {
    width: 100px;
    height: 100px; /* يجب أن يكون مربعاً */
    background-color: #ddd;
    
    /* السر كله هنا */
    border-radius: 50%; 
    
    border: 2px solid white; /* إطار أبيض حول الدائرة */
}

سؤال: إذا كان العنصر مستطيلاً وليس مربعاً، واستخدمت border-radius: 50%، ماذا سيكون الشكل الناتج؟
الإجابة: شكل بيضاوي (Oval). لعمل دائرة مثالية، يجب أن يتساوى الطول والعرض.

4. الخط الخارجي (Outline): الشقيق المشاغب

الآن نأتي للـ Outline. هو يشبه الـ Border جداً، يحيط بالعنصر، وله نفس الخصائص (width, style, color). لكنه يختلف عنه في سلوكه.

خصائص الـ Outline الفريدة

لا يحجز مساحة: الـ Outline يرسم "فوق" العنصر ولا يدفع العناصر المجاورة له. هو مثل ضوء الليزر، يظهر ولكن لا يؤثر فيزيائياً على الترتيب.
يحيط بالكل: لا يمكنك عمل outline لجهة واحدة (مثل outline-top). هو يحيط بالعنصر كاملاً دائماً.
Offset (الإزاحة): يمكنك إبعاد الـ outline عن العنصر باستخدام outline-offset، وهذه ميزة رائعة للتصميم لا يملكها الـ border.

مثال على Outline مع Offset


.special-btn {
    background-color: black;
    color: white;
    border: 2px solid white;
    
    /* خط خارجي أحمر مفصول عن العنصر */
    outline: 2px dashed red;
    outline-offset: 5px; /* مسافة 5 بيكسل بين الإطار والآوتلاين */
}

5. المعركة الكبرى: الفرق بين Border و Outline

هذا الجدول سيوضح لك متى تستخدم كل واحد منهما، وهو مرجع مهم جداً للمقابلات والعمل.

وجه المقارنة	Border (الإطار)	Outline (الخط الخارجي)
حجز المساحة	نعم، يزيد من حجم العنصر ويدفع الجيران.	لا، لا يحجز مساحة (يرسم فوق الصفحة).
التحكم بالجهات	ممكن (top, right, bottom, left).	غير ممكن (يحيط بالعنصر كاملاً).
التدوير (Radius)	يدعم `border-radius` ويتبع الانحناء.	في المتصفحات الحديثة يتبع الانحناء، قديماً كان مستطيلاً دائماً.
الاستخدام الرئيسي	التصميم الهيكلي والجمالي الأساسي.	تحديد التركيز (Focus) وإمكانية الوصول (Accessibility).
Offset	غير متاح.	متاح (`outline-offset`).

تحذير هام (Accessibility): لا تقم أبداً بإلغاء الـ outline عن الروابط والأزرار عند التركيز (:focus { outline: none; }) إلا إذا وضعت بديلاً واضحاً (مثل تغيير لون الخلفية). الـ outline هو الطريقة الوحيدة التي يعرف بها مستخدمو لوحة المفاتيح (Keyboard Users) مكانهم في الصفحة.

6. خدع سحرية بالحدود (مثلثات ودوائر)

الـ Borders في CSS ليست مجرد خطوط، بل هي أداة رسم هندسي. أشهر خدعة في تاريخ CSS هي رسم المثلث.

كيف نرسم مثلثاً؟ (The Triangle Hack)

الفكرة غريبة لكنها عبقرية:

اجعل عرض وطول العنصر صفر (width: 0; height: 0;).
ضع حدوداً سميكة جداً (مثلاً 50px).
اجعل لون 3 حدود شفافاً (transparent).
اجعل لون الحد الرابع ملوناً. هذا الحد سيظهر كمثلث!

كود رسم المثلث (للمحترفين)


.triangle-up {
    width: 0;
    height: 0;
    
    /* الحدود الجانبية شفافة لتصنع الزوايا */
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    
    /* الحد السفلي ملون ليصنع قاعدة المثلث */
    border-bottom: 100px solid red;
}

عند تطبيق هذا الكود، ستحصل على مثلث أحمر يشير للأعلى. بتغيير الجهات الشفافة والملونة، يمكنك توجيه المثلث لأي اتجاه.

جدول المقارنة والملخص

الـ Border هو "سور المنزل" (جزء من المبنى)، والـ Outline هو "شريط الشرطة الأصفر" الذي يوضع حول المنزل (مؤقت، خارجي، ولا يغير مساحة المنزل).

استخدم Border لتصميم الكروت، الأزرار، الفواصل، والجداول.
استخدم Outline لتوضيح العنصر النشط (Focus) أو لعمل تأثيرات جمالية مزدوجة مع الـ offset.
تذكر دائماً box-sizing: border-box لكي لا يخرب الإطار حسابات العرض والطول في تصميمك.

شرح الحدود Outline, Border | فى CSS