ال حدود هي خاصية مختصرة في CSS، والتي تستخدم لإضافة حد على عنصر. يسمح لنا بتحديد حدود الصندوق. يقوم بتعيين عرض الحدود ونمطها ولونها. تتضمن خاصية CSS هذه خصائص الحدود التالية:

عرض الحدود:يتم استخدام خاصية border-width لتعيين عرض الحدود. يمكننا أيضًا استخدام القيم المحددة مسبقًا رقيقة، متوسطة، و سميك لتعيين عرض الحدود. يحدد سمك الحدود. قيمته الافتراضية هي واسطة .
لا يمكن استخدام هذه الخاصية وحدها. يتم استخدامه دائمًا مع خصائص الحدود الأخرى مثل خاصية 'نمط الحدود' لتعيين الحدود أولاً؛ وإلا فإنه لن ينجح.
يمكن أن يكون عرض الحدود مختلفًا لكل جانب على حدة. ويمكن القيام بذلك باستخدام عرض الحدود السفلية، عرض الحدود من الأعلى، عرض الحدود من اليمين ، و عرض الحدود اليسرى .نمط الحدود:تحدد هذه الخاصية نمط الحدود. فهو يحدد ما إذا كانت الحدود صلبة، أو منقط، أو متقطع، أو مزدوج، أو أخدود، وإحدى القيم المحتملة الأخرى. بدون تعيين هذه الخاصية، أي بدون تعيين نمط الحدود، لن تعمل أي من خصائص الحدود الأخرى. ستكون الحدود غير مرئية دون تحديد نمط الحدود . وذلك لأن القيمة الافتراضية لخاصية CSS هذه هي لا أحد .
مشابه ل عرض الحدود ، يمكن أن يختلف نمط الحدود لكل جانب على حدة. يمكن القيام بذلك باستخدام الخصائص نمط الحدود السفلية، نمط الحدود العلوي، نمط الحدود الأيمن ، و نمط الحدود اليسرى .لون الحدود:يسمح لنا بتغيير لون الحدود. يمكننا ضبط اللون باستخدام اسم اللون أو قيمة RGB أو القيمة السداسية. مشابهه ل عرض الحدود و نمط الحدود ، يمكننا تغيير لون الحدود بشكل فردي، أي يمكننا تغيير لون الجانب السفلي والأعلى واليسار والأيمن من حدود العنصر. ويمكن القيام بذلك باستخدام الخصائص لون الحد السفلي، لون الحد العلوي، لون الحد الأيمن ، و لون الحدود اليسرى .
ال لون الحدود لا يمكن استخدام الممتلكات وحدها. ويجب استخدامه مع خصائص الحدود الأخرى مثل خاصية 'نمط الحدود' لتعيين الحدود؛ وإلا فإنه لن ينجح.

الحدود مقابل الخطوط العريضة

على الرغم من أن الحدود والحدود متشابهة جدًا، إلا أن هناك بعض الاختلافات بين الخطوط العريضة والحدود وهي كما يلي:

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

دعونا نرى مثالا لفهم خاصية الحدود.

مثال

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

انتاج |

الآن، هناك مثال آخر نستخدم فيه كليهما الخطوط العريضة و حدود ملكيات.

مثال

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

انتاج |