CSS Border - Individual Sides

-

في هذه الخاصية يتم التحكم بالجوانب الخاص ب element والي بشمل (top, right, bottom, and left) بشكل مستقل.

تمام خلونا نعمل امثلة عملية حتى نفهم الموضوع بشكل أفضل:

نبدأ بإنشاء ملف HTML باسم  BorderSides وبعدها نضيف الكود التالي: 

<!DOCTYPE html>
<html>
    <style>
        div{
            border-top-style: dotted;
            border-right-style: solid;
            border-bottom-style: dashed;
            border-left-style: double;
            border-color: red;
            border-width: 2px;
        }
    </style>
<body>
   <div > Borders Sides تطبيق </div>            
</body>
</html>



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


تمام في هذا المثال طبقنا امثلة على تغيير الجوانب الخاصة ب <Div> element . 

وللتذكير استخدمنا Internal CSS  في هذا المثال


طيب نفهم الكود:

طبقنا الكود التالي على <div>:


border-top-style: dotted: في هذا الكود نقوم بتطبيق style على الجانب العلوي ل div 

border-right-style: dotted: في هذا الكود نقوم بتطبيق style على الجانب الأيمن ل div 

border-bottom-style: dotted: في هذا الكود نقوم بتطبيق style على الجانب الاسفل ل div 

border-left-style: dotted: في هذا الكود نقوم بتطبيق style على الجانب الايسر ل div 


طريقة الكتابة بتكون بالشكل: 

border-<sides Values>-<Value>:<Value>


حيث : 

<sides Values> : هي القيم : (top, right, bottom, and left)

<Value> رقم  2 :هي نوع الخاصية المطلوب تطبيقها وفي مثالنا السابق تم تطبيق Style 

<Value> رقم  3 :هي قيمة الخاصية المطلوب تطبيقها وفي مثالنا السابق تم تطبيق dotted


يمكن تطبيق ذلك من خلال كتابة الامر :

p {
  border-style: dotted solid;
     border-color: red;
     border-width: 2px;
}

نتيجة تنفيذ هذا الكود نفسه النتيجة السابقة تمام


يمكن تطبيق  1parameter او 2parameter  او parameter3 او parameter4 

تمام نشوف كيف ممكن نطبق هذا الكلام


1parameter

border-Style: dotted;

مثال :

border-color: red;

في حال تطبيق قيمة واحدة ، فهذا يعني تطبيق هذه القيمة المدخلة النمط dotted على الجوانب الأربعة (top, right, bottom, left).


2parameter

border-width: top_bottom left_right;


مثال :


border-color: dotted solid;


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


parameter3

border-width: top right_left bottom

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

مثال :

border-color: dotted solid dotted;


parameter4

border-width: top right bottom left;


مثال

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

border-color: dotted solid double dotted;


 

امثلة :

Div.One {
  border-style: solid; /* solid top and bottom, Left and Right */
  border-width: 5px; /* 5px top and bottom, Left and Right */
  border-color: #FF0000; /* #FF0000 color for top and bottom, Left and Right */
}
Div.two {
  border-style: dotted solid; /* dotted top and bottom, solid for left  and right */
  border-width: 20px medium; /* 20px top and bottom, medium for left and right */
  border-color: #FF0000 black; /* #FF0000 color for top and bottom, black  for Left and Right */
}
Div.three {
border-style: dotted solid dashed; /* dotted top, solid for right and left, dashed for bottom */
  border-width: 25px thin 4px ; /* 25px top, thin for right and left, 4px for bottom */
  border-color: #FF0000 black yellow; /* #FF0000 color for top, black for  right and left, yellow for bottom */
}
Div.four {
border-style: dotted solid double dashed; /* dotted top, solid for right double for bottom, dashed for left */
border-width: 25px thin 4px meduim ; /* 25px top, thin for right 4px for bottom, medium for left */
  border-color: rgb(0,0,0) #FF0000 black yellow; /* rgb(0,0,0)  for top, #FF0000 for  right ,black for bottom ,yellow for left */
}