کناره های کادر در CSS (Border Sides)

در CSS می توانید برای هر سمت کادر به صورت جداگانه مقدار بدهید. «کناره های کادر» (Border Sides) با ویژگی های سمتِ بالا، راست، پایین و چپ کنترل می شوند و همین موضوع انعطاف زیادی برای طراحی می دهد.

ویژگی های سمت های کادر (Border Sides Properties)

برای هر سمت، می توانید سبک کادر را با یکی از این ویژگی ها تنظیم کنید: border-top-style، border-right-style، border-bottom-style و border-left-style.

نمونه تنظیم سبکِ هر سمت

p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }

نکته: پیش از هر چیز باید border-style را برای نمایش کادرها مقداردهی کنید. سپس می توانید سراغ عرض کادر و رنگ کادر بروید.

کوتاه نویسی برای کناره های کادر

می توانید با border-style همان نتیجه بالا را کوتاه تر بنویسید. دو مقدارِ اول برای بالا/پایین و راست/چپ به ترتیب اعمال می شوند.

p { border-style: dotted solid; }

الگوی یک، دو، سه و چهار مقدار

ترتیب مقادیر در border-style به این شکل است:

• چهار مقدار: بالا، راست، پایین، چپ؛ مانند dotted solid double dashed.
• سه مقدار: بالا؛ راست و چپ؛ پایین؛ مانند dotted solid double.
• دو مقدار: بالا و پایین؛ راست و چپ؛ مانند dotted solid.
• یک مقدار: برای هر چهار سمت؛ مانند dotted.

نمونه کامل الگوها

/* چهار مقدار */ p { border-style: dotted solid double dashed; } /* سه مقدار */ p { border-style: dotted solid double; } /* دو مقدار */ p { border-style: dotted solid; } /* یک مقدار */ p { border-style: dotted; }

هشدار: این الگوها برای border-width و border-color نیز صدق می کند؛ هنگام ترکیب، به ترتیب و تعداد مقادیر دقت کنید.

برای یادگیری بیشتر، راهنمای کوتاه نویسی کادر را ببینید و سپس به مقدمه کادرها برگردید.

راهنمای border-style در MDN و توضیحات W3C CSS Backgrounds and Borders مراجع خوبی هستند.