خاصية border في CSS تُستخدم لرسم حدود حول عنصر HTML. هذه الحدود تقع بين الحاشية (padding) والهامش (margin) للعنصر. تُعتبر border خاصية مُختصرة (shorthand) تجمع عدة خصائص فرعية للتحكم بشكل كامل في مظهر الحدود.

الخصائص الفرعية التي تتحكم بها border:

  • border-width: تُحدد سُمك الحد.
  • border-style: تُحدد شكل الحد (مثل خط مُتصل، مُتقطع، مُنقط، إلخ).
  • border-color: تُحدد لون الحد.

كيفية استخدام خاصية border:

يُمكن استخدام border بثلاث طرق رئيسية:

  1. باستخدام قيمة واحدة لكل الخصائص الفرعية:

يُمكن تحديد قيمة واحدة لكل من border-width و border-style و border-color في سطر واحد. يجب تحديد القيم بهذا الترتيب: border-width border-style border-color.

مثال:

CSS
div {
  border: 5px solid red;
}

هذا الكود سيُنشئ حدًا حول عنصر div بسُمك 5 بكسل، ونمط مُتصل (solid)، ولون أحمر.

  1. باستخدام قيم مُنفصلة للخصائص الفرعية:

يُمكن تحديد قيم مُنفصلة لكل من border-width و border-style و border-color باستخدام الخصائص الفرعية بشكل مُنفصل.

مثال:

CSS
div {
  border-width: 5px;
  border-style: solid;
  border-color: red;
}

هذا الكود يُعطي نفس النتيجة كالمثال السابق.

  1. التحكم في كل جانب من جوانب الحدود بشكل مُنفصل:

يُمكن التحكم في كل جانب من جوانب الحدود (أعلى، يمين، أسفل، يسار) بشكل مُنفصل باستخدام الخصائص التالية:

  • border-top: للحد العلوي.
  • border-right: للحد الأيمن.
  • border-bottom: للحد السفلي.
  • border-left: للحد الأيسر.

يُمكن أيضًا استخدام الخصائص الفرعية مع هذه الخصائص، مثل: border-top-width، border-right-style، border-bottom-color، إلخ.

مثال:

CSS
div {
  border-top: 5px solid red;
  border-right: 2px dashed blue;
  border-bottom: 3px double green;
  border-left: 1px dotted black;
}

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

قيم border-style:

توجد العديد من القيم التي يُمكن استخدامها مع خاصية border-style لتحديد شكل الحد، من أهمها:

  • none: لا يوجد حد.
  • hidden: لا يوجد حد (مُشابه لـ none، ولكن له بعض الاختلافات في التعامل مع الجداول).
  • dotted: حد مُنقط.
  • dashed: حد مُتقطع.
  • solid: حد مُتصل.
  • double: حد مُزدوج.
  • groove: حد ثلاثي الأبعاد يبدو كأخدود.
  • ridge: حد ثلاثي الأبعاد يبدو كحافة مُرتفعة.
  • inset: حد ثلاثي الأبعاد يبدو كأنه مُنخفض داخل العنصر.
  • outset: حد ثلاثي الأبعاد يبدو كأنه بارز خارج العنصر.

مثال شامل:

HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 10px;
  text-align: center;
}

#solid {
  border: 5px solid red;
}

#dashed {
  border: 3px dashed blue;
}

#dotted {
  border: 2px dotted green;
}

#double {
    border: 4px double black;
}

#mixed {
    border-top: 5px solid red;
    border-right: 2px dashed blue;
    border-bottom: 3px double green;
    border-left: 1px dotted black;
}
</style>
</head>
<body>

<div id="solid">Solid Border</div>
<div id="dashed">Dashed Border</div>
<div id="dotted">Dotted Border</div>
<div id="double">Double Border</div>
<div id="mixed">Mixed Borders</div>

</body>
</html>

هذا المثال يُوضح كيفية استخدام أنواع مُختلفة من الحدود حول عناصر div.

باستخدام هذه المعلومات، يُمكنك التحكم بشكل كامل في مظهر حدود العناصر في صفحات الويب الخاصة بك.