للحدود 3 سمات اساسية

بالنسبة للـ style

ستظهر بالشكل التالي في المتصفح

الحدود تحمل 4 قيم وهي بالترتيب:
four values (for the top border, right border, bottom border, and the left border).

top - right - bottom - left
غالبا هذا الترتيب موجود في اغلب الخصائص كما سنرى لاحقا

الطريقة المختصرة

وإذا كتبت مثلاً:
border-style:solid;
فإنها ستكون للجهات الأربعة

بالنسبة للـ width
فانه سمك خط الحدود ويقاس ب:
اما وحدات القياس: in px, pt, cm, em, etc)
او وحدات محددة مسبقا: thin, medium, or thick

والوحدات المحددة مسبقاً تأخذ تقريبا المقاسات التالية:
thin = 1px
medium = 3px
thick = 5px

ركز الان فقط على ال px والوحدات المحددة مسبقا واترك بقية وحدة القياس لحين الوصول الى مستوى اعلى (استجابة الموقع)

بالنسبة للون color
فإن هناك اكثر من طريقة لتعيين لون للعناصر او الحدود .... وهي:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent
اكتفي حاليا بالاولى والثانية
مثلا للون الأسود:
الطريقة الأولى : black
الطريقة الثانية: 000000#

ولتخصيص الحدود على جانب معين فقط اكتب:
- border-top
- border-right
- border-bottom
- border-left

وبدلا من كتابة الخصائص الثلاثة المذكورة سابقاً بهذه الطريقة:

يمكنك اختصارها بالشكل التالي
حيث تأخذ القاعدة:
border: [style] [width] [color]

ولان الحواف الحادة عادة مزعجة
نستخدم هذه السمة لعمل دوران خفيف للحواف
ضع القيمة التي تراها مناسبة بدلا من الـ 5PX

border-radius: 20px;

حتى الـ body لها حواف
ولكن كيف ستكون ؟ هل ملئ الشاشة؟

جـ/ لا بحسب المحتوى الموجود