CSS Shorthand Border Property

-

هي خاصية الاختزال والاختصار، بمعني يمكن تجميع خصائص Border في خاصية واحدة، الامر الذي يختصر الكثير من الوقت والجهد

هذه الخاصية تتعامل مع:
⦁ border-width
⦁ border-style (required)
⦁ border-color

تمام خلونا نعمل امثلة عملية حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم  BorderShorthand وبعدها نضيف الكود التالي: 
<!DOCTYPE html>
<html>
    <style>
        div{
            border: 5px dotted red;
        }
    </style>
<body>
   <div> Borders Sides تطبيق </div>            
</body>
</html>

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



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

طيب نفهم الكود:
طبقنا الكود التالي على <div>:
border: 5px dotted red;
سيتم تطبيق هذا الكود على جميع الحواف في div وببتكون النتيجة :
عرض الاطار 5 px ،
 نمط الاطار dotted
لون الاطار احمر .

يمكن تطبيق هذا الكود على جانب واحد من Div 
مثال 
<!DOCTYPE html>
<html>
    <style>
        div{
            border-left: 2px solid gray;
        }
    </style>
<body>
   <div> Borders Sides تطبيق </div>            
</body>
</html>

نتيجة التنفيذ:
لاحظ انه تم تغيير الجانب الايسر ل Div حسب المدخلات.