ویژگی border در CSS

border Property

ویژگی border در CSS حاشیه یا کادر عنصر را مشخص می کند. این ویژگی مقادیر ویژگی های border-width ,border-style و border-color را مشخص می کنند.

زمانی که بخواهیم هر چهار حاشیه (border) مانند هم باشند از ویژگی border استفاده می شود. برای اینکه هر یک را از دیگری متمایز کنیم می‌توان از ویژگیهای border-width, border-style و border-color که برای هر طرف مقدار متفاوتی می‌توانند قبول کنند، استفاده کرد.

تفاوت border و outline

outline خطی است که به دور عنصر و بیرون border کشیده می شود تا عنصر را متمایز کند.

نحوه نوشتار

border: solid;
border: 2px dotted;
border: outset #f33;
border: medium dashed green;

مقادیر

عرض خط

ضخامت حاشیه (border) را مشخص می کند و مقدار آن بصورت پیشفرض medium است.

استایل خط​

استایل حاشیه (border) را مشخص می کند و مقدار پیشفرض آن none است.

رنگ​

رنگ حاشیه را مشخص می کند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم. در این مثال از چهار ویژگی outline, border و box-shadow استفاده شده است.

نکته: اگر برای رنگ حاشیه (border-color) مقدار داده نشود، بصورت پیشفرض مقدار ویژگی color برای آن در نظر گرفته خواهد شد. در مثال زیر، شکل اول این عملکرد را میبینیم.

html

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

css

div {
    width: 100px;
    height: 100px;
    margin-top: 20px;
}
.box1 {
    border: 4px solid;
}
.box2 {
    border: 0.5rem dashed red;
}
.box3 {
    border: 0.3rem dotted blue;
}

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

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