border

خاصية الإطار border

خاصية border ترسم إطارًا حول العنصر بثلاث صفات: سمك ونمط ولون — أساس البطاقات والحقول والفواصل.

الاختصار الثلاثي الشهير: border: 1px solid #ccc (سمك، نمط، لون). النمط solid يغطي 95% من الاستخدام، مع dashed وdotted للحالات الخاصة (صناديق «أضف عنصرًا» المتقطعة).

ويمكن استهداف جهة واحدة — وهنا فخ RTL: border-left بموقع عربي يعني «يسار الشاشة» دائمًا؛ الصواب النسخ المنطقية border-inline-start التي تعني «بداية القراءة» فتنقلب تلقائيًا (فاصل الاقتباسات بهذا الموقع مبني هكذا). وللحدود بلا إزاحة تخطيط عند الهفر: بديلها outline لا يشغل مساحة.

الصياغة

.card {
  border: 1px solid #e5e0f0;
  border-radius: 12px;
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .b1 { border: 1px solid #7c5cff; }
  .b2 { border: 2px dashed #22d3ee; }
  .b3 { border-inline-start: 4px solid #7c5cff; background: #ede9fe; }
  .demo { padding: 10px 14px; border-radius: 10px; margin-bottom: 8px; }
</style>
<div class="demo b1">إطار رفيع صلب — البطاقات</div>
<div class="demo b2">متقطع — مناطق الإفلات والإضافة</div>
<div class="demo b3">حد بداية منطقي — يحترم RTL تلقائيًا</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
solid / dashed / dotted	الأنماط الثلاثة العملية — solid سيد الموقف
border-inline-start	حد «بداية القراءة» المنطقي — بديل left/right لمواقع RTL
border: none	إزالة إطار المتصفح الافتراضي عن الأزرار والحقول
border-color	تغيير اللون وحده — مثالي لحالات الهفر والتركيز

💡 نصائح عملية

هفر يغير الحد بلا قفزة تخطيط: احجز الحد شفافًا منذ البداية ثم لوّنه
خط جانبي مميز للاقتباسات والتنبيهات: border-inline-start عريض ملون

⚠️ أخطاء شائعة

border-left/right بموقع عربي بدل النسخ المنطقية
إضافة حد عند الهفر فقط فيقفز التخطيط بكسلين

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs