عرض لبه CSS

عرض لبه CSS

border-width این خاصیت اندازه‌های چهار مرز را مشخص می‌کند.

قطر مرز را می‌توان به اندازه خاصی (با استفاده از px،pt،cm،em) تنظیم کرد یا از یکی از سه مقدار پیش‌تعریف شده زیر استفاده کرد: نازک، متوسط یا قطر مرز:

مثال

نمایش اندازه‌های مختلف مرزها:

p.one {
  border-style: solid;
  قطر مرز: 5px;
}
p.two {
  border-style: solid;
  قطر مرز: قطر مرز متوسط;
}
p.three {
  نوع مرز: خط چین شده;
  قطر مرز: 2px;
} 
p.four {
  نوع مرز: خط چین شده;
  قطر مرز: قطر مرز
}

نتیجه:

5px قطر مرز

قطر مرز متوسط

2px قطر مرز

قطر مرز

آزمایش کنید

پهناي خاصی

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 */
}

آزمایش کنید