CSS Tutorial

الخاصية Border فى CSS

سجين القدر
اخر تحديث :

شرح الخاصية Border فى CSS

سنتناقش فى هذا الفصل شرح الخاصية Border فى CSS من جميع جوانبها، مع بعض الأمثلة التوضيحية.

أولًا: ما هى الخاصية border؟

خاصية الـ border فى CSS تتيح لك بتحديد حدود العنصر.

مثال للتوضيح

Border Example 
<!DOCTYPE html>
			<html>
			<head>
			<title>CSS Border</title>
			<meta charset="UTF-8" />

			<style>
            div {
			border: 5px solid blue;
            }
			</style>
			</head>
			<body>

			<div>Border Example</div>

			</body>
			</html>
Border Example

فى المثال السابق، تم تحديد border للـ div بلون أزرق.

نمط الحدود – CSS Border Style

تحدد خاصية border-style فى CSS نمط الخط لجميع الجوانب الأربعة لحدود العنصر. كالتالى:

<style>
    div {
	border-style: dotted;
    }
	</style>

	<div>First example for border.</div>
First example for border.

تحدد خاصية border-style نوع الحدود التي سيتم عرضها. وهناك قيم كثيرة مسموح بها لهذه الخاصية:

القيمةالوصف
noneلا يعرض أي حدود.
hiddenيحدد حد مخفي.
dottedيعرض سلسلة من النقاط المستديرة.
dashedيعرض سلسلة من الشرطات القصيرة المربعة أو مقاطع الخط.
solidيعرض خطًا منفردًا ومستقيمًا.
doubleيعرض خطين مستقيمين.
grooveيعرض حد بمظهر منحوت (عكس ridge).
ridgeيعرض حد بمظهر مقذوف (عكس groove).
insetيعرض حد يجعل العنصر يبدو مدمجًا (عكس outset)
outsetيعرض حد يجعل العنصر يبدو مزخرفًا (عكس inset).

يمكن تحديد خاصية border-style باستخدام قيمة واحدة أو قيمتين أو ثلاثة أو أربعة:

  • قيمة واحدة: يتم تطبيق نفس النمط على الجوانب الأربعة.
  • قيمتين: يتم تطبيق النمط الأول على الأعلى والأسفل ، والثاني على اليسار واليمين.
  • ثلاث قيم : يتم تطبيق النمط الأول على الأعلى ، والثاني على اليسار واليمين ، والثالث على الأسفل.
  • أربع قيم: يتم تطبيق الأنماط على الأعلى ، واليمين ، والأسفل ، واليسار بهذا الترتيب (باتجاه عقارب الساعة).

مثال للتوضيح:

<style>
    .none { border-style: none;  }

    .hidden { border-style: hidden; }

    .dotted { border-style: dotted; }

    .dashed { border-style: dashed; }

    .solid { border-style: solid; }

    .double { border-style: double; }

    .groove { border-style: groove; }

    .ridge { border-style: ridge; }

    .inset { border-style: inset; }

    .outset { border-style: outset; }
	</style>

	<div class="hidden">Hidden border Example.</div>
	<div class="dotted">Dotted border Example.</div>
	<div class="dashed">Dashed border Example.</div>
	<div class="solid">Solid border Example.</div>
	<div class="double">Double border Example.</div>
	<div class="groove">Groove border Example.</div>
	<div class="ridge">Ridge border Example.</div>
	<div class="inset">Inset border Example.</div>
	<div class="outset">Outset border Example.</div>

Dotted border Example.

Dashed border Example.

Solid border Example.

Double border Example.

Groove border Example.

Ridge border Example.

Inset border Example.

Outset border Example.

يمكنك إنشاء حد مختلف لكل جنب من جوانب العنصر، كالتالى:

<style>
    .mix {
	border-style: solid dashed dotted inset; 
    }
	</style>

	<div class="mix">Mix Borders Example</div>
Mix Borders Example

 

لون الحدود – CSS Border Color

 

يتم استخدام خاصية border-color لتعيين لون الحدود الأربعة. كالتالى:

<style>
    div {
	border-color: blue;
	border-style: solid;
    }
	</style>

	<div>Border Color Example</div>
Border Color Example

إذا لم يتم تعيين خاصية border-color ، فإنه يرث لون العنصر.

هناك أكثر من طريقة لتحديد لون الحدود:

  • إسم اللون مباشرًا، مثل “black”.
  • HEX، مثل “000#”.
  • RGB، مثل “(rgb (0,0,0”.
  • HSL، مثل “(hsl(0, 0%, 0%“.
  • شفاف transparent.

مثال للتوضيح:

div { 
    border-color: black; /* black color */
    border-style: solid;  
	}

	div { 
    border-color: #000; /* black color */
    border-style: solid;  
	}

	div { 
    border-color: rgb(0, 0, 0); /* black color */
    border-style: solid;  
	}

	div { 
    border-color: hsl(0, 0%, 0%); /* black color */
    border-style: solid;  
	}

يمكنك أيضًا تحديد لون معين لكل جانب من الجوانب الأربعة (الحد الأعلى ، والحد الأيمن ، والحد السفلي ، والحد الأيسر)، كالتالى:

<style>
    /* [black] top, [blue] right, [green] bottom and [red] left */
    div { 
	border-color: black blue green red; 
	border-style: solid;  
    }
	</style>

	<div>Colors Example</div>
Colors Example

عرض الحدود – CSS Border Width

تحدد خاصية border-width عرض الحدود الأربعة.

يمكن تعيين العرض حسب حجم معين بـ ( px و pt و cm و em و medium و thin و thick، … إلخ).

 

مثال للتوضيح:

<style>
    div.first { 
	border-width: 5px; 
	border-style: dotted;  
    }

    div.second { 
	border-width: 2pt;
	border-style: solid;
    }

    div.third { 
	border-width: medium;
	border-style: double;  
    }
	</style>

	<div class="first">First Example</div>
	<div class="second">Second Example</div>
	<div class="third">Third Example</div>
First Example

Second Example

Third Example

يمكنك أيضًا تحديد width معين لكل جانب من الجوانب الأربعة (الحد الأعلى ، والحد الأيمن ، والحد السفلي ، والحد الأيسر)، كالتالى:

/* [23px] top, [8px] right, [30px] bottom and [20px] left */
	div { 
	border-width: 23px 8px 30px 20px; 
	border-style: solid;  
	}
Width border Example

جوانب الحدود – CSS Border Sides

 

الجوانب الفردية: من الممكن تحديد حدود مختلفة لكل جانب.

في CSS ، يوجد خصائص لتحديد كل من الحدود (أعلى ، يمين ، أسفل ، يسار)، كالتالى:

<style>
    div { 
    border-top-style: solid;
    border-right-style: dotted;
    border-bottom-style: solid;
    border-left-style: dotted;
    }
	</style>

	<div>Border Sides Example</div>
Border Sides Example

 

يمكنك تنفيذ نفس الكود السابق فى سطر واحد، كالتالى:

div { 
	border-style: solid dotted;
	}

توضيح

1.إذا كانت خاصية border-style لها أربع قيم، كالتالى ( ;border-style: solid dotted double inset )، إذن:

  1. الحد العلوي = solid.
  2. الحد الأيمن = dotted.
  3. الحد السفلى = double.
  4. الحد الأيسر = inset.

 

2. إذا كانت خاصية border-style لها ثلاث قيم، كالتالى ( ;border-style: solid double inset )، إذن:

  1. الحد العلوي = solid.
  2. الحد الأيمن + الحد الأيسر = double.
  3. الحد السفلى = inset.

 

3. إذا كانت خاصية border-style تحتوي على قيمتين، كالتالى ( ;border-style: solid dotted )، إذن:

  • الحد العلوي + الحد السفلى = solid.
  • الحد الأيمن + الحد الأيسر = dotted.

 

4. إذا كانت خاصية border-style تحتوي على قيمة واحده، كالتالى( ;border-style: solid )، إذن:

  • الأريع جوانب سيكون لهم نفس النمط بدون إختلاف.

مثال للتوضيح:

/* [solid] = top | [dotted] = right | [inset] = bottom | [double] = left */
	div { 
	border-style: solid dotted inset double;
	}

	/* [solid] = top | [inset] = right & bottom | [double] = left */
	div { 
	border-style: solid inset double;
	}

	/* [solid] = top & bottom | [dotted] = right & left */
	div { 
	border-style: solid dotted;
	}

	/* [solid] = top & right & bottom & left */
	div { 
	border-style: solid;
	}

خاصية الحدود المختصرة – CSS Shorthand Border Property

 

لتقصير الكود ، من الممكن تحديد جميع خصائص الحدود الفردية في خاصية واحدة.

خاصية الـ border هي خاصية لإختزال خصائص الحدود الفردية التالية:

  1. عرض الحدود border-width.
  2.  نمط الحد border-style (مطلوبة).
  3.  لون الحدود border-color.

مثال للتوضيح:

<style>
    div { 
	border: 3px solid blue;
    }
	</style>

	<div>Blue Solid Border Example</div>
Blue Solid Border Example

الحدود الدائرية – CSS Border Radius

تُستخدم خاصية border-radius لإضافة حدود دائرية إلى العنصر، كالتالى:

<style>
    div { 
	border-radius: 10px;    
	border: 3px solid blue;
    }
	</style>

	<div>Border Radius Example</div>
Border Radius Example

تلخيص الفصل

 

  • border: تعيين كافة خصائص الحدود في إعلان واحد.
  • border-color: تحدد لون الحدود الأربعة.
  • border-style: تحدد نمط الحدود الأربعة.
  • border-bottom: تعيين كافة خصائص الحدود السفلية في إعلان واحد.
  • border-bottom-color: تحدد لون الحد السفلي.
  • border-bottom-style: تحدد نمط الحد السفلي.
  • border-bottom-width: تحدد عرض الحد السفلي.
  • border-left: تعيين كل خصائص الحد الأيسر في إعلان واحد.
  • border-left-color: تحدد لون الحد الأيسر.
  • border-left-style: تحدد نمط الحد الأيسر.
  • border-left-width: تحدد عرض الحد الأيسر.
  • border-right: تعيين كل خصائص الحد الأيمن في إعلان واحد.
  • border-right-color: تحدد لون الحد الأيمن.
  • border-right-style: تحدد نمط الحد الأيمن.
  • border-right-width: تحدد عرض الحد الأيمن.
  • border-top: تعيين كل خصائص الحد الأعلى في إعلان واحد.
  • border-top-color: تحدد لون الحد الأعلى.
  • border-top-style: تحدد نمط الحد الأعلى.
  • border-top-width: تحدد عرض الحد الأعلى.
  • border-width: تحديد عرض الحدود الأربعة.
  • border-radius: تعيين كافة خصائص الحدود الدائرية لزوايا العنصر.
تعديل المقال
الأقسام

مقالات قد تهمك