border - Nouvil

السابق التالي

Border style

value: solid

solid

Border width

value: 1px

1px

Border color

value: orange

orange

شرح خاصية css border

خاصية border هي خاصية في CSS تحدد حدود العنصر وتحدد نوع الخط ولون الحدود وسمك الحدود. تستخدم هذه الخاصية لتحسين تصميم الصفحة وتحديد الإطارات والحواف للعناصر.

يمكن تحديد border بشكل فردي لكل من الحواف الأربعة للعنصر، أو يمكن تحديدها باستخدام القيمة الواحدة للتحكم في جميع الحواف في نفس الوقت. إذا تم تحديد القيمة بشكل فردي، فيجب تحديد القيمة بترتيب الحواف بعد ذلك عقارب الساعة، بدءًا من الحافة العلوية واليمنى والسفلية واليسرى.

يمكن تحديد خاصية border باستخدام CSS، على سبيل المثال:

/* تحديد border بشكل فردي لجميع الحواف */
.item {
  border-top: 1px solid black;
  border-right: 2px dashed red;
  border-bottom: 3px dotted green;
  border-left: 4px double blue;
}

/* تحديد border بقيمة واحدة لجميع الحواف */
.item {
  border: 1px solid black;
}

يمكن تحديد نوع الخط ولون الحدود وسمك الحدود باستخدام القيم المختلفة مثل solid و dashed و dotted و double وغيرها. كما يمكن تحديد لون الحدود باستخدام الأسماء الثابتة للألوان أو باستخدام قيم RGB أو HEX.

يمكن استخدام خاصية border في تصميم الصفحات لتحديد الإطارات والحواف للعناصر وتحسين تخطيط الصفحة. ومع ذلك، يجب استخدام الخاصية بحذر لأنه يمكن أن يؤدي إلى تشويش تنسيق الصفحة واختفاء العناصر أو تغطية بعضها البعض.