ویژگی border-color در CSS

border-color Property

ویژگی کوتاه نویسی border-color در CSS رنگ حاشیه عنصر را مشخص می کند.

نحوه نوشتار

border-color: red;
border-color: red #f015ca;
border-color: red rgb(240,30,50,.7) green;
border-color: red yellow green blue;

ویژگی border-color می تواند یک، دو، سه و یا چهار مقدار بپذیرد.

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

مقادیر

رنگ

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

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

html

<div class="box1">
     border-color:<span>tomato dodgerblue lightgreen lightseagreen;</span>
</div>
<div class="box2">
     border-color: <span>tomato dodgerblue lightgreen;</span>
</div>
<div class="box3">
     border-color: <span>tomato dodgerblue;</span>
</div>
<div class="box4">
     border-color: <span>tomato;</span>
</div>

css

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
div {
    width: 375px;
    height: 100px;
    background-color: #eeeeee;
    box-sizing: border-box;
    border: 8px solid;
    margin-top: 30px;
}
.box1 {
    border-color: tomato dodgerblue lightgreen lightseagreen; 
}
.box2 {
    border-color: tomato dodgerblue lightgreen; 
}
.box3 {
    border-color: tomato dodgerblue; 
}
.box4 {
    border-color: dodgerblue; 
}

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

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