ويژگی border-color در CSS
ویژگی border-color، می تواند رنگ حاشیه (border) را مشخص کند.
نکته: برای ایجاد حاشیه، حتما باید از ویژگی border-style استفاده کنید.
این ویژگی به چهار صورت می تواند مقدار دریافت کند:
- نام رنگ مانند: white
- مقدار HEX مانند: #fff
- مقدار RGB مانند: rgb(255, 255, 255)
- مقدار HSL مانند: hsl(0, 0%, 100%)
نکته: برای اطلاعات بیشتر، درباره رنگ ها، به آموزش رنگ ها در CSS مراجعه کنید.
border-color: green;
border-color: #00f;
border-color: rgb(0, 255, 0);
border-color: hsl(55, 100%, 50%);
جهت های border-color در CSS
border-color: red;
ویژگی border-color، در نمونه کد بالا، خلاصه ی چهار ویژگی است.
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
خلاصه نویسی border-color با یک مقدار
ویژگی border-color را به چند صورت می توان خلاصه نویسی کرد.
ویژگی border-color با یک مقدار:
border-color: red;
- در چهار جهت به صورت یکسان اعمال می شود.
خلاصه نویسی border-color با دو مقدار
ویژگی border-color با دو مقدار:
border-color: y x;
- مقدار اول در جهت بالا و پایین (محور y)
- مقدار دوم در جهت راست و چپ (محور x)
border-color: red blue;
خلاصه نویسی border-color با سه مقدار
ویژگی border-color با سه مقدار:
border-color: top x bottom;
- مقدار اول در جهت بالا
- مقدار دوم در جهت راست و چپ (محور x)
- مقدار سوم در جهت پایین
border-color: red blue purple;
خلاصه نویسی border-color با چهار مقدار
ویژگی border-color با چهار مقدار:
border-color: top right bottom left;
- مقدار اول در جهت بالا
- مقدار دوم در جهت راست
- مقدار سوم در جهت پایین
- مقدار چهارم در جهت چپ
border-color: red blue purple green;
خلاصه درس
در این درس با ویژگی border-color در CSS:
- انواع مقداردهی
- خلاصه نویسی آن با مقدار های مختلف
آشنا شدیم.
توسعه دهندگان
احسان اسلامی