شرح خاصية border style في CSS ومعرفة نوع الحدود

خاصية border-style في CSS من أهم الخصائص المسؤولة عن شكل الحدود المحيطة بالعناصر داخل صفحات الويب. بدون تحديد قيمة لهذه الخاصية لن يظهر أي حدود حتى لو أضفنا border-width أو border-color.

القيم الأساسية لخاصية border-style

1- القيمة none

تستخدم لإخفاء الحدود بشكل كامل.

p {
  border-style: none;
}

2- القيمة hidden

تشبه none ولكنها تُستخدم غالباً مع جداول HTML.

3- القيمة solid

تُظهر خط متصل حول العنصر.

p {
  border-style: solid;
}

4- القيمة dotted

تُظهر نقاط متقطعة.

p {
  border-style: dotted;
}

5- القيمة dashed

تُظهر خط متقطع.

p {
  border-style: dashed;
}

6- القيمة double

تُظهر خط مزدوج.

p {
  border-style: double;
}

7- القيم groove و ridge

تُظهر تأثيرات ثلاثية الأبعاد للحدود.

p {
  border-style: groove;
}
p {
  border-style: ridge;
}

8- القيم inset و outset

تُظهر الحدود بشكل غائر أو بارز.

p {
  border-style: inset;
}
p {
  border-style: outset;
}

توزيع القيم على الجوانب

يمكننا تحديد قيمة واحدة أو أكثر:

قيمة واحدة: تطبق على كل الجوانب.
قيمتان: الأولى للأعلى والأسفل، الثانية لليمين واليسار.
ثلاث قيم: الأولى للأعلى، الثانية لليمين واليسار، الثالثة للأسفل.
أربع قيم: للأعلى، اليمين، الأسفل، اليسار بالترتيب.

/* قيمة واحدة */
p { border-style: solid; }

/* قيمتين */
p { border-style: dotted dashed; }

/* ثلاث قيم */
p { border-style: solid dotted double; }

/* أربع قيم */
p { border-style: solid dotted double dashed; }

تخصيص كل جانب على حدة

يمكنك استخدام خصائص منفصلة:

p {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: double;
  border-left-style: dashed;
}

الخاتمة

خاصية border-style في CSS تعطي للمطورين حرية كبيرة في التحكم بشكل الحدود. ومن خلال الجمع بينها وبين border-width و border-color يمكننا إنشاء تصاميم احترافية وجذابة.