الخاصية border هي صيغة مختصرة في CSS تقبل قيمًا متعددة لرسم خط حول العنصر الذي يتم تطبيقه عليه.

تسمح لك خصائص حدود CSS بتحديد نمط وعرض ولون حدود العنصر.

CSS Border Style

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

القيم التالية مسموح بها:

• dotted - لتحديد حد منقط
• dashed - لتحديد حد متقطع
• solid - يحدد حدًا متصلًا
• double - لتحديد حد مزدوج
• groove - يحدد حدًا مجوفًا ثلاثي الأبعاد. يعتمد التأثير على قيمة لون الحدود
• ridge - يحدد حدًا مموجًا ثلاثي الأبعاد. يعتمد التأثير على قيمة لون الحدود
• inset - يحدد حد داخلي ثلاثي الأبعاد. يعتمد التأثير على قيمة لون الحدود
• outset - تحدد حدود البداية ثلاثية الأبعاد. يعتمد التأثير على قيمة لون الحدود
• none - لا تحدد أي حدود
• hidden - يحدد حدًا مخفيًا
  
  

يمكن أن تحتوي خاصية border-style من قيمة واحدة إلى أربع قيم (للحد العلوي ، والحد الأيمن ، والحد السفلي ، والحد الأيسر).

مثال:
عرض لأنماط الحدود المختلفة:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

النتيجة:

CSS Border Width

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

يمكن تعيين العرض كحجم معين (px, pt, cm, em, etc) أو باستخدام إحدى القيم الثلاث المحددة مسبقًا: thin, medium, or thick:

مثال:
عرض مختلف لعرض الحدود:

p.one {
  border-style: solid;
  border-width: 5px;
}
 
p.two {
  border-style: solid;
  border-width: medium;
}
 
p.three {
  border-style: dotted;
  border-width: 2px;
}
 
p.four {
  border-style: dotted;
  border-width: thick;
}

النتيجة:

عروض جانبية محددة:

يمكن أن تحتوي خاصية border-width من قيمة واحدة إلى أربع قيم (للحد العلوي ، والحد الأيمن ، والحد السفلي ، والحد الأيسر):

مثال:

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
 
p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
 
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

CSS Border Color

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

يمكن ضبط اللون من خلال:

• الاسم - حدد اسم اللون ، مثل "أحمر"
• HEX - حدد قيمة HEX ، مثل ("# ff0000"
• RGB - حدد قيمة RGB ، مثل ("rgb (255،0،0"
• HSL - حدد قيمة HSL ، مثل "hsl (0 ، 100٪ ، 50٪"
• transparent

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

مثال:
عرض ألوان الحدود المختلفة:

p.one {
  border-style: solid;
  border-color: red;
}
 
p.two {
  border-style: solid;
  border-color: green;
}
 
p.three {
  border-style: dotted;
  border-color: blue;
}

النتيجة:

Specific Side Colors

يمكن أن تحتوي خاصية border-color  من قيمة واحدة إلى أربع قيم (for the top border, right border, bottom border, and the left border).

مثال:

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

HEX Values

يمكن أيضًا تحديد لون الحد باستخدام قيمة سداسية عشرية (HEX):

مثال:

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

RGB Values

أو باستخدام قيم RGB:

مثال:

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

HSL Values

يمكنك أيضًا استخدام قيم HSL:

مثال:

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}