آموزش خاصیت Border در CSS

خاصیت Border در CSS از جمله خاصیت های پرکار برد میباشد که البته توسط این خاصیت میتوانید یک خط با ضخامت دلخواه برای حاشیه ، باکس ها ، تصاویر و تمامی عناصر های موجود در صفحه ایجاد کنید.

بطور مثال شما میخواهید به دور تصویر تان یک خط با ضخامت مشخص با رنگ مشخص اضافه نمایید تا تصویر تان زیباتر دیده شود.

نوع استفاده از خاصیت Border به شکل ذیل میباشد:

Border:border-width border-style border-color |initial |inherit

Border-width : ضخامت خط را مشخص می کند .

Border-style : استایل خط را مشخص میکند که شامل مقادیر زیر میباشد :

None : خط را حذف میکند .

Hidden : برابر با none است و خط را حذف میکند .

Dotted : خط را بصورت نقطه چین نمایش میدهد .

Dashed : خط را بصورت خط چین نمایش میدهد .

Solid : خط را بصورت ممتد و صاف نمایش میدهد .

Double : خط را بصورت دو خط موازی نمایش میدهد .

Groove : خط را بصورت سه بعدی از داخل نمایش میدهد .

Ridge : خط را بصورت سه بعدی از خارج نمایش میدهد .

Inset : خط را بصورت سه بعدی از داخل نمایش میدهد .

Outset : خط را بصورت سه بعدی از خارج نمایش میدهد .

Initial : مقدار پیش فرض و قرار میدهد

Inherit : با توجه به مقدار عنصر والد مقدار و مشخص میکند. مثلا اگر برای عنصر والد border-style مقدار solid مشخص شده باشد ، برای عنصر فرزند هم مقدار solid مشخص میشود .

تصویر زیر تمامی خاصیت های بالا را به شکل واضح بیان میکند:

اما چگونه از خاصیت های صفت Border در CSS استفاده نماییم؟؟؟

خوب یک خاصیت دیگر را نیز میخوانیم و بعد بالای نوع نوشتن آن میرویم!

Border-color : رنگ خط را مشخص میکند. برای تعیین رنگ میتوانید از نام رنگ ها ، کد های hex و rgb ها استفاده کنید . حتی میتوانید با rgba مقدار opacity خط را کم و زیاد کنید .

نحوه استفاده از این خاصیت بصورت خلاصه نویسی و استاندارد به شکل زیر است

Border: 3px solid red;
Border: 1px dashed #000
Border: 3px dotted rgba(0,0,0,0.7)
Border Radius

گاهی اوقات شما میخواهید دور تصاویر ، باکس ها و element های تان را گرد کنید و شکلی شبیه به تصویر زیر ایجاد کنید.

برای این کار از خاصیت radius -border استفاده می کنید . با این خاصیت میتوانید دور آنها ها را به صورت منحنی گرد کنید . نحوه ی استفاده از این خاصیت به شکل زیر است.

Border:3px solid red;
Border-radius:5px;

توجه : این خاصیت در مرورگر های قدیمی و یا مرورگر های مثل Chroom,Safari,Firefox… باید از دستور زیر با دستور بالا استفاده نمایید.

-moz-border-radius:5px;
-webkit-border-radius:5px;

تصویر زیر تصویر تخصصی تر مییاشد که در صورت نیاز میتوانید از دستورات آن استفاده نمایید.