ویژگی border-width در CSS

ویژگی border-width، می تواند عرض حاشیه (border) را مشخص کند.

نکته: برای ایجاد حاشیه، حتما باید از ویژگی border-style استفاده کنید.

ویژگی border-width، به دو حالت عددی و غیرعددی مقداردهی می شود.

border-width: 5px;
border-width: thin;

border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;

مقدار عددی border-width در CSS

برای مقداردهی عددی border-width، می توان از انواع واحدها مانند پیکسل، درصد و ... استفاده کرد.

border-width: 5px;

مقدار غیر عددی border-width در CSS

برای مقداردهی غیر عددی border-width، می توان از مقادیر زیر استفاده کرد:

  • thin (نازک)
  • medium (متوسط)
  • thick (ضخیم)
border-width: thin;
border-width: medium;
border-width: thick;

جهت های borde width در CSS

border-width: 5px;

ویژگی border-width، در نمونه کد بالا، خلاصه ی چهار ویژگی است.

border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;

خلاصه نویسی border-width با یک مقدار در CSS

ویژگی border-width را می توان به چند صورت خلاصه نویسی کرد.

ویژگی border-width با یک مقدار:

border-width: solid;
  • در چهار جهت به صورت یکسان اعمال می شود.

خلاصه نویسی border-width با دو مقدار در CSS

ویژگی border-width با دو مقدار:

border-width: y x;
  • مقدار اول در جهت بالا و پایین (محور y)
  • مقدار دوم در جهت راست و چپ (محور x)
border-width: 20px medium;

خلاصه نویسی border-width با سه مقدار در CSS

ویژگی border-width با سه مقدار:

border-width: top x bottom;
  • مقدار اول در جهت بالا
  • مقدار دوم در جهت راست و چپ (محور x)
  • مقدار سوم در جهت پایین
border-width: 20px thin 5px;

خلاصه نویسی border-width با چهار مقدار در CSS

ویژگی border-width با چهار مقدار:

border-width: top right bottom left;
  • مقدار اول در جهت بالا
  • مقدار دوم در جهت راست
  • مقدار سوم در جهت پایین
  • مقدار چهارم در جهت چپ
border-width: 5px thin 15px 2px;

خلاصه درس

در این درس با ویژگی border-width در CSS:

  • انواع مقداردهی
  • خلاصه نویسی آن با مقدار های مختلف

آشنا شدیم.

توسعه دهندگان
احسان اسلامی