عرض الحواف في CSS

عرض الحواف في CSS

border-width يحدد هذا السمة عرض الأربعة جوانب للحافة.

يمكنك تعيين عرض الحافة إلى حجم معين (بالبكسل px، البوصة pt، السنتيمتر cm، الوحدة em) أو استخدام واحد من القيم الثلاثة المسبقة التحديد: رقيق، متوسط أو سميك:

مثال

عرض مختلف أسمكات الحواف:

p.one {
  border-style: solid;
  عرض الحافة: 5بكسل;
}
p.two {
  border-style: solid;
  عرض الحافة: متوسط;
}
p.three {
  نمط الحافة: نقطية;
  عرض الحافة: 2بكسل;
} 
p.four {
  نمط الحافة: نقطية;
  عرض الحافة: سميك;
}

النتيجة:

عرض حافة 5بكسل

عرض حافة متوسط

عرض حافة 2بكسل

حافة سميكة

تجربة بنفسك

عرض الجانب المحدد

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

مثال

p.one {
  border-style: solid;
  border-width: 5px 20px; /* حرف أعلى وآسفل 5px، الحروف الأخرى 20px */
}
p.two {
  border-style: solid;
  border-width: 20px 5px; /* حرف أعلى وآسفل 20px، الحروف الأخرى 5px */
}
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* حرف أعلى 25px، حرف يمين 10px، حرف أسفل 4px، حرف يسار 35px */
}

تجربة بنفسك