الحدود CSS (الحدود)

تحيط حافات العنصر (Border) بالملء والمحتوى

خصائص حافات CSS

تسمح خاصية حافات CSS بتحديد منطقة حافات الجدار. يمكن أن تكون الحافات نمطًا مسبقًا، مثل الخطية، أو الحافات المزدوجة، أو الحافات المقطعة وما إلى ذلك.يمكن أن تكون أيضًا صورةفي المقطع التالي سيتم شرح كيفية تعيين مختلف الخاصيات لتحديد نمط الحافات (border-style)، والألوان (border-color) وسمك الحافات (border-width).

(border-width) خاصية عرض الحافات

border-widthتحدد الخاصية هذه عرض منطقة الحافات. إنها خاصية اختصار مختصرة تستخدم لتحديد سمك جميع أربعة جوانب حافات العنصر في نفس الوقت.

p {
　　　　border-width: medium 10px thick 15px;
}

(border-style) خاصية نمط الحافات

هذاborder-styleتحدد الخاصية هذه نمط حافات الجدار، مثل: solid،dotted وما إلى ذلك. إنها خاصية اختصار مختصرة تُستخدم لتحديد نمط الخطوط لجميع أربعة جوانب حافات العنصر.

يمكن أن تأخذ الخاصية border-style إحدى القيم التالية: none،hidden،dashed،dotted،double،groove،inset،outset،ridge وsolid.

p {
　　　　border-style: dotted;
}

(border-color) خاصية لون الحافز

هذاborder-colorتحديد الخاصيةcolorحافز الحدود. وهي أيضًا تستخدم لضبط ألوان الحدود لأربعة جوانب العنصر.

p {
　　　　border-style: solid;
　　　　border-color: #ff0000;
}

خصائص اختصار الحافز

هذاborder الخصائص في CSS هي ميزة مختصرة لتحديد أوضاع متعددة من خصائص الحافز في قاعدة واحدة.

p {
　　　　border: 5px solid #ff4500;
}

إذا تم تجاهل أو عدم تحديد قيمة خاصية border واحدة عند تعيين border shorthand property، فإن القيمة الافتراضية للخاصية (إذا كانت موجودة) ستستخدم.

في هذا المثال، سيكون الحافز أسودًا بعرض 5px:

p {
　　　　color: black;
　　　　border: 5px solid;
}

لكن، عند وجود خاصية border-style، فإن التغليب على القيمة لن يظهر أي حافز، لأن قيمة border-style افتراضية هي none.

في المثال التالي، لن يكون هناك حافز:

p {
　　　　border: 5px #00ff00;
}