خاصية border فى لغة سى اس اس CSS

خاصية border فى لغة سى اس اس CSS

 خاصية css border هى خاصية تستخدم لضبط حدود العرض تسمح لك خصائص الحدود بتحديد كيفية ظهور حدود المربع الذي يمثل عنصراً.

CSS خصائص الحدود فى 

. هناك ثلاث خصائص للحد يمكنك تغييرها -

  يحدد border-color لون الحد.

يحدد border-style ما إذا كان يجب أن يكون الحد متصلاً أم خطاً متقطعاً أم خطاً مزدوجاً أم إحدى القيم المحتملة الأخرى.

يحدد border-widthعرض الحد.

 .الآن ، سنرى كيفية إستخدام هذه الخصائص مع الأمثلة.

1-خاصية لون الحدود The border-color Property

تتيح لك خاصية لون الحدود تغيير لون الحد المحيط بالعنصر. يمكنك تغيير لون الجوانب السفلية واليسرى والعلوية واليمنى لحد عنصر ما بشكل فردي بإستخدام الخصائص .

1. border-bottom-color changes the color of bottom border.
2. border-top-color changes the color of top border.
3. border-left-color changes the color of left border.
4. border-right-color changes the color of right border.

يوضح المثال التالي تأثير كل هذه الخصائص.

 p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }

<p class = "example1">
        .  هذا المثال يظهر جميع الحدود بألوان مختلفة 
      </p>
      
      <p class = "example2">
       .  هذا المثال يظهر كل الحدود باللون الأخضر فقط  
      </p>

 2-خاصية نمط الاطار The border-style Property

:تتيح لك خاصية نمط الحدود تحديد أحد أنماط الحدود التالية -

• 
  

.وتلك  نماذج لكل عنصر 

3- خاصية سمك الاطار The border-width Property

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

يمكنك تغيير عرض الحدود السفلية والعليا واليسرى واليمنى لعنصر ما بشكل فردي باستخدام الخصائص التالية -

border-bottom-width تغير سمك الاطار السفلي.
border-top-width تغير سمك الاطار الاعلي.
border-left-width تغير سمك الاطارالايسر.
border-right-width تغير سمك الاطار الايمن.

                                                                                                      .  أمثلة