CSS - Borders الحدود

CSS - الحدود (Borders)

🔸 تُستخدم خاصية border في CSS لإضافة حدود حول العناصر، ويمكن التحكم في نوعها، سماكتها، لونها، وزواياها.

✅ الخصائص الأساسية للحدود

• border-style – نوع الخط المستخدم في الحدود (مثل: solid, dashed, dotted).
• border-width – سماكة الحدود.
• border-color – لون الحدود.
• border – خاصية مختصرة تجمع الثلاث خصائص السابقة.
• border-radius – لتدوير زوايا الحدود.

🧪 مثال عملي كامل

div {
  border-style: solid;
  border-width: 3px;
  border-color: blue;
  border-radius: 10px;
  padding: 10px;
}

🧪 مثال باستخدام الخاصية المختصرة

div {
  border: 3px dashed red;
}

📌 شرح تفصيلي لكل خاصية

• border-style: يُحدد شكل الخط، القيم الممكنة:
  • none: بدون حدود
  • solid: خط متصل
  • dashed: خط متقطع
  • dotted: نقاط
  • double: خط مزدوج
• border-width: تُحدد سماكة الحدود، مثل 1px, 5px, medium.
• border-color: تُحدد لون الحدود، ويمكن استخدام أسماء الألوان أو القيم مثل #000 أو rgb().
• border: خاصية مختصرة تشمل الثلاث خصائص الأساسية: border-width, border-style, border-color.
• border-radius: تُستخدم لتدوير الزوايا، مثل 10px تعني زاوية مدورة بشكل ناعم.

💡 ملاحظات مهمة

• كل جهة من العنصر (top, right, bottom, left) يمكن التحكم بحدودها بشكل منفصل.
• مثلاً: border-top-style، border-left-color، وهكذا.
• يمكن استخدام border-radius لصناعة الأزرار الدائرية أو البطاقات ذات الزوايا الناعمة.