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; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.