CSS Border Width

-

في هذه الخاصية يتم التحكم  بحجم  Width  الحواف (border) الخاص ب element

تمام خلونا نعمل امثلة عملية حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم  BorderWidthوبعدها نضيف الكود التالي: 
<!DOCTYPE html>
<html>
    
<body>
   <p style="border-style:solid; border-color: red; border-width: 5px;"> Borders تطبيق </p>            
   <p style="border-style:dotted; border-color: gray; border-width: 5px medium;"> Borders تطبيق  </p>
   <p style="border-style:double; border-color: green; border-width:  5px thin 10px;;"> Borders تطبيق </p>
   <p style="border-style:solid; border-width: thick 10px 12px 0; "> Borders تطبيق </p>
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)



تمام في هذا المثال طبقنا امثلة على تغيير Width Border الخاص ب <P> element . 
وللتذكير استخدمنا Inline CSS  

طيب نوخذ فكره سريعة عن الكود:
طبقنا الكود التالي على <p>:

⦁ border-width: والتي هي مسؤولة عن تحديد حجم الاطار 
تمام طريقة الكتابة بتكون بالشكل: 
Border-width:<Value>;

  Value هنا يمكن ان تكون 
 1parameter او 2parameter  او parameter3 او parameter4
تمام نشوف كيف ممكن نطبق هذا الكلام

1parameter
مثال :
borderborder-width: 5px;
في حال تطبيق قيمة واحدة ، فهذا يعني تطبيق هذه القيمة المدخلة على الجوانب الأربعة (top, right, bottom, left).

2parameter
border-width: top_bottom left_right;

مثال :

border-width: 5px 10px;

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

parameter3
border-width: top right_left bottom

في حال تطبيق ثلاث قيم ، سيتم تطبيق القيمة الأولى في الجزء العلوي. وسيتم تطبيق القيمة الثانية على الجانبين الأيمن والأيسر. ويتم تطبيق القيمة الثالثة على الجزء السفلي.
مثال :
border-width:  5px thin 10px;

parameter4
border-width: top right bottom left;

مثال
في حال توفير أربع قيم، سيتم تطبيق القيمة الأولى على الجزء العلوي. وسيتم تطبيق القيمة الثانية على الجانب الأيمن. وسيتم تطبيق القيمة الثالثة على الجزء السفلي. وسيتم تطبيق القيمة الرابعة على الجانب الايسر.
border-width: 5px 10px 15px 20px

يمكن تطبيق قيم مختلفة على Border-Width والتي قد تكون واحد من : 



واكيد يمكن دمج القيم thin, medium, thick, and fixed مع بعض في خاصية CSS border-width.
راجع أيضًا خصائص الحدود ولون الحدود ونمط الحدود.

امثلة:
Div.One {
  border-style: solid;
  border-width: 5px; /* 5px top and bottom, Left and Right */
}

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

Div.two {
  border-style: solid;
  border-width: 20px medium; /* 20px top and bottom, medium for left ang right */
}
في هذا المثال، طبقنا قيمتين. سيتم تطبيق القيمة الأولى 20 بكسل على الجزء العلوي والسفلي من Div. سيتم تطبيق القيمة الثانية medium على الجانبين الأيسر والأيمن من Div.


Div.three {
  border-style: solid;
  border-width: 25px thin 4px ; /* 25px top, thin for right and left, 4px for bottom */
}
Div.four {
  border-style: solid;
  border-width: 25px thin 4px meduim ; /* 25px top, thin for right 4px for bottom, medium for left */
}
في هذا المثال طبقنا أربع قيم. حيث سيتم تطبيق القيمة الأولى 25 بكسل على الجزء العلوي من Div. ,سيتم تطبيق القيمة الثانية thin على الجانب الأيمن . وسيتم تطبيق القيمة الثالثة البالغة 4 بكسل على الجزء السفلي.واخيرا تطبيق القيمة الرابعة medium على الجانب الأيسر.