ویژگی border-width در CSS

border-width CSS Property

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

نحوه نوشتار

border-width: thin;
border-width: medium;
border-width: thick;
border-width: 5px;
border-width: 5px 10px;
border-width: 5px 10px 1.5rem;
border-width: 5px 10px 1.5rem 2em;

مقادیر

کلیدواژه

توسط یکی از کلید واژه های thin ،medium و thick عرض حاشیه عنصر مشخص می شود

عدد

عرض حاشیه توسط اعدادی با واحد های اندازه CSS مشخص می شوند. مانند (px, rem, em)

نکته: چون کلیدواژه ها مقدارِ عددی مشخصی ندارند، استفاده از آنها در تناسب با یکدیگر معنی پیدا می کند. نسبت این مقادیر همیشه ثابت بوده و بصورت thin ≤ medium ≤ thick می باشد.

این ویژگی، مقادیر چهار ویژگی زیر مجموعه خود را مشخص می کند که عبارتند از:

border-width-top
border-width-right
border-width-bottom
border-width-left

ویژگی border-width یکی از چهار نوع مقدار زیر را می پذیرد:

اگر یک مقدار مشخص شود، این مقدار برای هر چهار ضلعِ حاشیه اعمال می شود.
اگر دو مقدار مشخص شود، اولی برای حاشیه های بالا و پایین و دومی برای حاشیه های راست و چپ اعمال می شوند.
اگر سه مقدار مشخص شود، اولی برای حاشیه بالا، دومی برای حاشیه های راست و چپ و سومی برای حاشیه پایین اعمال می شوند.
اگر چهار مقدار مشخص شود، به ترتیب برای حاشیه های بالا، راست، پایین و چپ اعمال خواهد شد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>

css

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
div {
    height: 100px;
    width: 100px;
    border-style: solid;
    margin-top: 15px;
    display: grid;
    place-content: center;
}
.box1 {
    border-width: 7px 15px 2px;
}
.box2 {
    border-width: 5px 1rem;
}
.box3 {
    border-width: 0.5em;
}
.box4 {
    border-width: thick;
}
.box5 {
    border-top-width: 10px;
}
 .box6 {
    border-left-width: 1rem;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.