CSS – الحدود Borders

كثيرا ما نحتاج الى رسم حدود حول عناصر HTML. هناك 3 خواص رئيسية لرسم الحدود وهي:

• border-width: وهي تحدد عرض/سمك الحدود للعنصر.
  • يوجد ايضا خواص لكل ناحية وهي: border-left-width وborder-right-width و border-top-width و border-bottom-width .
• border-color : وهي تحدد لون حدود العنصر.
  • يوجد ايضا خواص لكل ناحية وهي: border-left-color وborder-right-color و border-top-color و border-bottom-color .
• border-style : وهي تحدد شكل الحدود سواء كانت صامتة او مخططة او غيرها.
  • يوجد ايضا خواص لكل ناحية وهي: border-left-style وborder-right-style و border-top-style و border-bottom-style .
• border-radius: وهي تحدد اذا كانت اركان الحدود دائرية وشكل التدوير.
• يوجد ايضا خواص لكل ناحية وهي: border-top-left-radius و border-top-right-radius و border-bottom-left-radius و border-bottom-right-radius .
• border : وهي خاصية تستخدم كمختصر للخواص السابقة

تحديد سمك الحدود border-width

نستخدم الخاصية border-width لتحديد سمك الحدود ويكون كل النواحي بنفس السمك او يمكننا استخدام تلك الخاصية كخاصية تجميع لكل النواحي. ويمكننا ايضا استخدام الخواص border-left-width وborder-right-width و border-top-width و border-bottom-width و لتحديد سمك/عرض كل ناحية.

p.differentWidth1{
	border-left-width: 2px;
	border-right-width: 1px;
	border-top-width: 5px;
	border-bottom-width: 4px;
}


p.differentWidth2{
	border-width: 2px 1px 5px 4px;
}


p.sameWidth{
	border-width: 3px;
}

ايضا يمكننا استخدام الكلمات thin و medium و thick بدلا من قياسات الارقام.

p.sameWidth2{
	border-width: thin;
}

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

نستخدم الخاصية border-color لتحديد لون الحدود ويكون كل النواحي بنفس اللون او يمكننا استخدام تلك الخاصية كخاصية تجميع لكل النواحي. ويمكننا ايضا استخدام الخواصborder-left-color وborder-right-color و border-top-color و border-bottom-color لتحديد لون كل ناحية.

p.differentColor1{
	border-left-color: red;
	border-right-color: green;
	border-top-color: blue;
	border-bottom-color: gray;
	
	border-width: 2px;
}


p.differentColor2{
	border-color: #FF0000 #008000 #0000FF #555555;
	border-width: 2px;
}


p.sameColor{
	border-color: red;
	
	border-width: 2px;
}

تحديد شكل الحدود border-style

تستخدم الخاصية border-style لتحديد شكل الحدود. هل مخططة ام منقطة او غيرها وتأخذ تلك القيم:

• none: بدون حدود.
• solid: الحد يكون مصمت متصل.
• dotted : الحد يكون منقط.
• dashed: الحد يكون متقطع.
• double: الحد يكون خطين متصلين.
• groove: الحد يبدو وكأنه محفور في الشاشة.
• ridge: الحد شكله عكس groove.
• inset: الحد يبدو وكأنه مدمج في الشاشة.
• outset: الحد يبدو وكأنه خارج من الشاشة.
• hidden: يشبه none لكن تختلف مع عنصر Table.

ويمكننا ايضا استخدام الخواص border-left-style وborder-right-style و border-top-style و border-bottom-style لتحديد شكل كل ناحية.

p.differentStyle1{
	border-left-style: solid;
	border-right-style: dotted;
	border-top-style: dashed;
	border-bottom-style: double;
	
	border-width: 2px;
}

p.differentStyle2{
	border-style: solid dotted dashed double;
	border-width: 2px;
}


p.sameStyle{
	border-style: inset;
	
	border-width: 2px;
}

تحديد دوران الحدود border-radius

نستخدم الخاصية border-radius لتحديد دوران الحدود ويكون كل النواحي بنفس قطر الدوران او يمكننا استخدام تلك الخاصية كخاصية تجميع لكل النواحي. ويمكننا ايضا استخدام الخواص border-top-left-radius و border-top-right-radius و border-bottom-left-radius و border-bottom-right-radius لتحديد دوران كل ناحية.

p.differentRadius1{
	border-top-left-radius: 5px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 20px;
	
	border-width: 2px;
}

p.differentRadius2{
	border-radius: 5px 10px 15px 20px;
	border-width: 2px;
}


p.sameRadius{
	border-radius: 3px;
	
	border-width: 2px;
}

تحديد شامل للحدود border

نستخدم الخاصية border لتجميع الخواص السابقة وهي بالترتيب: border-width و border-style و border-color .

p.summary{
	border: 5px solid red;
	
	border-width: 2px;
}