CSS — کادرها - رنگ (Borders Color)

آخرین بروزرسانی: 1404/07/12

قبلی: کادرها - عرض (Borders Width) بعدی: کادرها - کناره ها (Borders Sides)

رنگ کادر در CSS (Border Color)

ویژگی «رنگ کادر (Border Color)» برای تعیین رنگ چهار سمت کادر به کار می رود. با این ویژگی می توانید با نام رنگ، HEX، RGB، HSL یا مقدار transparent کار کنید.

تعریف «رنگ کادر» (Border Color) و روش های مقداردهی

ویژگی border-color رنگ حاشیه ها را مشخص می کند. روش های رایج مقداردهی عبارت اند از:

نام رنگ: مانند red
HEX: مانند #ff0000
RGB: مانند rgb(255, 0, 0)
HSL: مانند hsl(0, 100%, 50%)
transparent

نکته: اگر border-color را تنظیم نکنید، رنگ از خود عنصر به ارث می رسد. همچنین برای نمایش، ابتدا باید کادرها و به ویژه border-style را مقداردهی کنید.

نمونه رنگ های مختلف

p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: dotted; border-color: blue; }

رنگ کادر برای کناره ها (یک تا چهار مقدار)

می توانید border-color را با یک تا چهار مقدار بنویسید تا به ترتیب برای بالا، راست، پایین و چپ اعمال شود.

p.one { border-style: solid; border-color: red green blue yellow; /* بالا قرمز، راست سبز، پایین آبی، چپ زرد */ }

هشدار: ترتیب مقادیر اهمیت دارد؛ چهار مقدار به ترتیب بالا، راست، پایین و چپ هستند.

نمونه های HEX، RGB و HSL

HEX

p { border-style: solid; border-color: #ff0000; /* red */ }

RGB

p { border-style: solid; border-color: rgb(255, 0, 0); /* red */ }

HSL

p { border-style: solid; border-color: hsl(0, 100%, 50%); /* red */ }

برای ادامه یادگیری می توانید به عرض کادر و کادرِ کناره ها و نیز کوتاه نویسی کادر سر بزنید.

راهنمای border-color در MDN را مطالعه کنید و تعریف رسمی را در استاندارد W3C ببینید.