شرح خاصية border-color لتغيير لون الحدود

أهلا بكم في كود ويب أهلا بكم في درس جديد من دروس css وفي هذا الدرس سوف نتعرف على خاصية جديدة من خواص css وهي خاصية border-color من خلال استخدام هذه الخاصية يمكننا تغيير لون حدود الطبقات كما نريد.

تعلمنا في الدرس السابق كيفية إظهار حدود للطبقات من خلال خاصية border وعرفنا أن هذه الخاصية تحتوى على أشكال مختلفة منها الحدود المنقطة والبارزة وغيرها لمراجعة الدرس من هنا

الخاصية والقيمة

border-color:red; جعل اللون موحد لجميع الاتجاهات
border-top-color:orange; لون محدد للحدود العلوية فقط
border-right-color:blue; لون محدد للحدود اليمنى
border-bottom-color:#ccc; لوحد محدد للحدود السفلية
border-left-color:#444; لون محدد للحدود اليسرى
border-color:blue red; تطبيق اللون الأزرق على الحدود العلوية واليمنى واللون الأحمر على الحدود السفلية واليسرى
border-color:blue red orang #ccc; تطبيق اللون الأزرق على الحدود العلوية  والأحمر للحدود اليمنى والبرتقالى للحدود السفلية والرمادي للحدود اليسرى

مثال

 هنا قمنا بدمج أكواد css ضمن العنصر المراد تنسيقه 
<div class='border' style='border:1px solid blue; padding:10px;margin:5px 0;'></div>
<div class='border' style='border:1px dashed red; padding:10px;margin:5px 0;'></div>
<div class='border' style='border:1px dotted orange; padding:10px;margin:5px 0;'></div>

 

النتيجة

مثال

 كود html

<div class='border-solid'></div>
<div class='border-dashed'></div>
<div class='border-dotted'></div>

 كود css

/*هنا جعلنا لكل معرف شكل حدود مختلف*/
.border-solid{border:1px solid;}
.border-dashed{border:1px dashed;}
.border-dotted{border:1px dotted;}

/*هنا قمنا بجمع الثلاث معرفات وجعلنا لهم لون الحدود أحمر*/
.border-solid,.border-dashed,.border-dotted{border-color:red;}

/*تنسيقات أخرى*/
.border-solid,.border-dashed,.border-dotted{padding:10px;margin:5px 0;}