
تعلمنا في الدرس السابق كيفية إظهار حدود للطبقات من خلال خاصية 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;
تطبيق اللون الأزرق على الحدود العلوية والأحمر للحدود اليمنى والبرتقالى للحدود السفلية والرمادي للحدود اليسرى
مثال
<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;}
شرح خاصية border-color لتغيير لون الحدود
https://www.mohamed24119.com/2017/03/border-colorcss.html