الخاصية Border في لغة CSS
تسمح لنا خصائص الحدود border بتحديد منطقة الحدود لصندوق العنصر.
تظهر الحدود مباشرة بين الهوامش و الحواشي للعنصر. يمكن أن يكون الحد إما نمطًا محددًا مسبقًا مثل ، خط متصل ، خط منقط ، خط مزدوج ، إلخ أو صورة.
فهم أنماط الحدود المختلفة
تحدد الخاصية border-style نمط حدود صندوق العنصر مثل: solid و dotted ... إلخ.
الخاصية border-style خاصية مختصرة اتحديد نمط الخط لجميع الجوانب الأربعة لحد العنصر.
يمكن أن تحتوي الخاصية border-style على القيم التالية: none و hidden و solid و dashed و dotted و double و inset و outset و groove و ridge. الآن ، دعنا نلقي نظرة على الرسم التوضيحي التالي الذي يبين الاختلافات بين أنواع أنماط الحدود.
القيم none و hidden لا تعرض أي حدود ، ومع ذلك ، هناك اختلاف بسيط بين هاتين القيمتين. في حالة الـ collapsing في حدود الجداول ، فإن القيمة none لها الأولوية الدنيا ، بينما تكون للقيمة hidden الأولوية القصوى ، إذا تم تحديد أي حد متعارض مع آخر.
تُنشئ القيم inset و outset و groove و ridge تأثيرًا ثلاثي الأبعاد يعتمد بشكل أساسي على قيمة الخاصية border-color. يتم تحقيق ذلك عادةً عن طريق إنشاء "ظل" من لونين أفتح قليلاً وأغمق من لون الحد.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>أنماط الحدود</title>
<style>
body{
direction: rtl;
text-align: center;
}
p {
border-width: 10px;
background: #b3d9ff;
padding: 20px;
margin: 20px;
}
p.none {
border-style: none;
}
p.hidden {
border-style: hidden;
}
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;
}
</style>
</head>
<body>
<p class="none">إستخدام القيمة none</p>
<p class="hidden">إستخدام القيمة Hidden</p>
<p class="dotted">إستخدام القيمة dotted</p>
<p class="dashed">إستخدام القيمة dashed</p>
<p class="solid">إستخدام القيمة solid</p>
<p class="double">إستخدام القيمة double</p>
<p class="inset">إستخدام القيمة inset</p>
<p class="outset">إستخدام القيمة outset</p>
<p class="groove">إستخدام القيمة groove</p>
<p class="ridge">إستخدام القيمة ridge</p>
</body>
</html>
المخرجات
يجب تحديد نمط الحدود لجعل الحد يظهر حول عنصر ، لأن نمط الحد الافتراضي هو none. في حين أن قيمة عرض الحد الافتراضي أو سمكه هي medium، ولون الحد الافتراضي هو نفس لون النص.
تحديد سماكة الحدود css
تحدد الخاصية border-width عرض أو سمك منطقة الحدود. الخاصية border-width هي خاصية مختصرة لتحديد سماكة جميع الجوانب الأربعة لحد العنصر في نفس الوقت.
لنجرب المثال التالي لفهم كيفية عملها:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد سماكة الحدود</title>
<style>
body{
direction: rtl;
text-align: right;
}
p {
border-style: solid;
padding: 20px;
margin: 20px;
}
p.one {
border-width: 5px;
}
p.two {
border-width: 5px 10px;
}
p.three {
border-width: 5px 10px 15px;
}
p.four {
border-width: medium 10px thick 15px;
}
</style>
</head>
<body>
<p class="one"><strong>إستخدام قيمة واحدة:</strong>تحدد القيمة الواحدة سماكة جميع جوانب الحدود الأربعة.</p>
<p class="two"><strong>إستخدام قيمتين:</strong>تحدد القيمة الأولى سماكة الحد العلوي والسفلي ، بينما تحدد القيمة الثانية سماكة الحد الأيمن والأيسر.</p>
<p class="three"><strong>إستخدام ثلاث قيم:</strong> تحدد القيمة الأولى سماكة الحد العلوي ، وتحدد القيمة الثانية سماكة الحد الأيمن والأيسر ، وتحدد القيمة الثالثة سماكة الحد السفلي.</p>
<p class="four"><strong>إستخدام أربع قيم: </strong>تحدد كل قيمة سماكة الحد بشكل فردي بالترتيب العلوي واليمين والسفلي واليسار.</p>
</body>
</html>
المخرجات
يمكن تحديد سماكة الحد باستخدام أي وحدة طول ، مثل px و em و rem وما إلى ذلك. بالإضافة إلى وحدات الطول ، يمكن أيضًا تحديد سماكة الحد باستخدام واحدة من ثلاث كلمات رئيسية: thin و medium و thick. قيم النسبة المئوية غير مسموح بها للخاصية border-width .
تحديد لون الحدود css
تحدد الخاصية border-color لون منطقة الحدود. هذه أيضًا خاصية مختصرة لتحديد لون جميع الجوانب الأربعة لحد العنصر.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد لون الحدود</title>
<style>
body{
direction: rtl;
text-align: center;
}
p {
border-width: 15px;
padding: 20px;
margin: 20px;
}
p.one {
border-style: solid;
border-color: #ff0000;
}
p.two {
border-style: solid;
border-color: #ff0000 #00ff00;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}
</style>
</head>
<body>
<p class="one"><strong>إستخدام قيمة واحدة:</strong>تحدد القيمة الواحدة لون الحد لجميع جوانب الأربعة.</p>
<p class="two"><strong>إستخدام قيمتين:</strong>تحدد القيمة الأولى لون الحد العلوي والسفلي ، بينما تحدد القيمة الثانية لون الحد الأيمن والأيسر.</p>
<p class="three"><strong>إستخدام ثلاث قيم:</strong>تحدد القيمة الأولى لون الحد العلوي ، وتحدد القيمة الثانية لون الحد الأيمن والأيسر ، وتحدد القيمة الثالثة لون الحد السفلي.</p>
<p class="four"><strong>إستخدام أربع قيم:</strong>تحدد كل قيمة لون الحد بشكل فردي بالترتيب العلوي واليمين والسفلي واليسار.</p>
</body>
</html>
المخرجات
لا تعمل خاصية border-width أو border-color إذا تم استخدامها بمفردها. يجب إستخدام الخاصية border-style لتحديد نمط الحد أولاً.
الخاصية المختصرة Border
إن الخاصية border هي خاصية مختصرة لتحديد واحدة أو أكثر من خصائص الحدود الفردية border-width و border-style و border-color في خاصية واحدة.
دعنا نلقي نظرة على المثال التالي لفهم كيفية عملها:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>الخاصية المختصرة Border
</title>
<style>
body{
direction: rtl;
font-size: 30px;
}
p {
border: 5px solid #00ff00;
background: yellow;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<p>إستخدام الخاصية المختصرة border</p>
</body>
</html>
المخرجات
إذا تم حذف إحدى القيم أو لم يتم تحديدها أثناء تحديد الخاصية المختصرة border ، فسيتم استخدام القيمة الافتراضية لتلك الخاصية بدلاً من ذلك إن وجدت.
على سبيل المثال ، إذا كانت قيمة الخاصية border-color مفقودة أو لم يتم تحديدها ، فسيتم استخدام خاصية لون العنصر كقيمة للون الحد.
في المثال أدناه ، ستكون الحدود عبارة عن خط أحمر متصل بسمك 5 بكسل:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>حذف خاصية لون الحدود</title>
<style>
body{
direction: rtl;
font-size: 30px;
}
p {
color: red;
background: yellow;
border: 5px solid;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<p>لون حدود هذه الفقرة هو نفس لون النص.</p>
</body>
</html>
المخرجات
ولكن ، في حالة قيمة الخاصية border-style يؤدي حذف القيمة إلى عدم ظهور أي حد على الإطلاق ، لأن القيمة الافتراضية لهذه الخاصية هي none. في المثال التالي لن يكون هناك حدود:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تجاهل الخاصية border-style</title>
<style>
body{
direction: rtl;
font-size: 30px;
}
p {
border: 5px #00ff00;
background: yellow;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<p>هذه الفقرة ليس لها حدود.</p>
</body>
</html>
المخرجات
