جاري التحميل...

الحدود (Border) في CSS

تعرف التعبئة والصور والتدرجات والتلاشي الناعم. المهارة التالية: ارسم حافة الصندوق. الحد (border) هو الخط الذي يؤطّر العنصر — البطاقات والأزرار والحقول واللوحات تعتمد عليه.

ما هو الحد؟

حد CSS يجلس على حافة صندوق العنصر. له ثلاثة أجزاء: العرض (السماكة)، النمط (الشكل — مصمت، متقطع، وغيرها)، واللون. إن نسيت النمط فغالباً لن ترى خطاً مفيداً حتى مع عرض محدد.

الأجزاء الثلاثة

فكّر في كل حد كوصفة قصيرة: سماكة + شكل + لون.

العرض والنمط واللون منفصلين

css
CSS Code 
.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

لماذا يهم النمط؟

border-width وحده لا يكفي. بدون border-style غير القيمة الابتدائية none غالباً لن ترى خطاً. ابدأ بـ solid ثم جرّب أشكالاً أخرى.

الاختصار: سطر واحد بدل ثلاثة

اختصار border يجمع العرض والنمط واللون. ترتيب يومي شائع: عرض → نمط → لون.

اختصار border

css
CSS Code 
.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}

أنماط الحد الشائعة

النمط شخصية الخط. احفظ مجموعة يومية صغيرة أولاً.

📊 قيم border-style الشائعة

الكلمة الشكل استخدام يومي
solid خط متصل بطاقات، أزرار، حقول
dashed شرطات قصيرة تلميحات، مناطق إسقاط
dotted نقاط فواصل ناعمة، إطارات خفيفة
double خطان متوازيان تأكيد زخرفي (بقلة)
none لا يُرسم حد إعادة ضبط / إزالة الحافة
hidden مثل none في طي حدود الجداول الجداول لاحقاً — اعرف الاسم

جرّب عدة أنماط جنباً إلى جنب

نفس العرض واللون؛ يتغيّر النمط فقط.

مصمت ومتقطع ومنقط ومزدوج

css
CSS Code 
.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }

جانب واحد في كل مرة

يمكنك تنسيق الأعلى واليمين والأسفل واليسار منفصلين — مفيد لخط سفلي أو شريط تأكيد أيسر أو بطاقة غير متماثلة.

حدود لكل جانب

css
CSS Code 
.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}

اختصار لجانب واحد

border-left: 4px solid #0f766e هي الطريقة اليومية لتعيين حافة دون لمس الباقي.

عادة البطاقة اليومية

حد خفيف مع حشو داخلي وتعبئة ناعمة يعطي بطاقة واضحة دون صراخ.

بطاقة بحد بسيط

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* الاستدارة درس لاحق — اترك الزوايا مربعة هنا */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}

إزالة الحد

لمسح الحد فضّل border: none (أو border-style: none). ضبط border-color: transparent وحده قد يبقي عرضاً/فراغاً — none إعادة ضبط نظيفة.

إعادة ضبط بـ border none

css
CSS Code 
.plain {
border: none;
}

جرّبها بنفسك

  1. بطاقة بـ border-width وborder-style: solid وborder-color فيروزي.
  2. أعد نفس المظهر بـ border: 2px solid #0f766e.
  3. أربع صناديق: solid وdashed وdotted وdouble بنفس السماكة.
  4. اقتباس بحد أيسر سميك فقط.
  5. ابدأ بزر محدود ثم أزل الحافة بـ border: none.

أخطاء شائعة

  • ضبط العرض واللون ونسيان border-style (فلا يظهر شيء)
  • خلط border (الحافة المرسومة) مع margin (الفراغ الخارجي) — أداتان مختلفتان
  • توقع زوايا مستديرة من border وحده — ذلك border-radius (الدرس التالي)
  • تلوين كل جانب بصخب بلا داعٍ
  • ترك حد شفاف سميك وأنت تقصد border: none

ملخص

  • الحد يحتاج عرضاً ونمطاً ولوناً
  • border: 2px solid #0f766e هو الاختصار اليومي
  • تعلّم أولاً solid وdashed وdotted وdouble وnone
  • نسّق الجوانب منفصلين حين يطلب التصميم ذلك
  • أعد الضبط نظيفاً بـ border: none
  • اترك الزوايا مربعة الآن — الاستدارة لاحقاً

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
9
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Css درس تعليمي