ماهي الحدود في لغة CSS؟

تعد خاصية الحدود Border واحدة من أكثر الخصائص استخدامًا في لغة CSS، حيث تسمح للمستخدم بتحديد خصائص الحدود لعناصر الصفحة. في هذا الدرس، سوف نتحدث عن كل خواص ال Border وشرح كل أنواع والإتجاهات في لغة CSS مع مثال كود لكل منها.

تعريف الخاصية: تستخدم خاصية Border في CSS لتعيين خصائص الحدود لعناصر الصفحة. يمكن استخدام Border لتحديد العرض والارتفاع واللون والنمط للحدود. يتم تطبيق الخاصية عن طريق إعطاء عنصر الصفحة الخاصية border وتحديد القيم المناسبة لكل خاصية.

أنواع ال Border : تتضمن خاصية Border أربعة أنواع رئيسية، وهي:

Border-Width: تستخدم Border-Widthلتحديد عرض الحدود. يمكن تحديد قيمة العرض بوحدات مختلفة مثل البكسل والنسبة المئوية. يمكن أيضًا تحديد القيمة بوحدة الـ thin و medium و thick.

Border-Style: تستخدم Border-Styleلتحديد نمط الحدود. يمكن تحديد القيمة لـ solid أو dotted أو dashed أو double أو groove أو ridge أو inset أو outset.

Border-Color: تستخدم Border-Color لتحديد لون الحدود. يمكن تحديد القيمة لأي لون متاح في CSS باستخدام القيمة النصية للون أو قيمة HEX أو RGB.

Border-Radius: تستخدم Border-Radius لتحديد شكل الحدود. يمكن تحديد القيمة لإنشاء حواف مستديرة أو بزاوية مختلفة.

الإتجاهات: يمكن تحديد Border للعناصر في أربعة اتجاهات رئيسية، وهي:

Border-Top: لتحديد خصائص حدود الجزء العلوي من العنصر

Border-Right: لتحديد خصائص حدود الجزء الأيمن من العنصر.

Border-Bottom: لتحديد خصائص حدود الجزء السفلي من العنصر.

Border-Left: لتحديد خصائص حدود الجزء الأيسر من العنصر.

مثال على استخدام خاصية Border في CSS:

HTML

<div style="border: 2px solid red; border-radius: 5px; padding: 10px;">
    <p>هذا النص يحتوي على حدود</p>
</div>

نتيجة الكود:



في هذا المثال، تم تحديد حدود بعرض 2 بيكسل ونمط solid ولون أحمر. تم أيضًا تحديد شكل الحواف بقيمة 5 بيكسل وتم إضافة هامش داخلي بقيمة 10 بيكسل للحد من مساحة العنصر الداخلية.

يمكن استخدام الخاصية Border بأي شكل تريده وفقًا لاحتياجات التصميم الخاصة بك. من المهم أن تفهم كيفية استخدام الخصائص المختلفة لتعديل خصائص الحدود الخاصة بك.

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.