کوتاه نویسی کادر در CSS (Border Shorthand)

با «کوتاه نویسی کادر (Border Shorthand)» می توانید تمام گزینه های مرتبط با کادر را یکجا تعیین کنید. این روش کد را کوتاه تر می کند و نگهداری را آسان تر می سازد، اما همچنان نیاز است ترتیب مقادیر را درست بنویسید.

تعریف کوتاه نویسی کادر و اجزای آن

ویژگی border میان بُری برای این مقادیر است: border-width، border-style (ضروری) و border-color. بنابراین می توانید همه را در یک اعلان بنویسید.

p { border: 5px solid red; }

نکته: برای نمایش کادر باید حتماً border-style مقدار داشته باشد. سپس می توانید درباره عرض کادر و رنگ کادر تصمیم بگیرید.

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

امکان تعیین میان بُر برای تنها یک سمت نیز وجود دارد. در نمونه های زیر، فقط سمت چپ یا پایین مقداردهی شده است.

Left Border

p { border-left: 6px solid red; }

Bottom Border

p { border-bottom: 6px solid red; }

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

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

راهنمای border در MDN و سند W3C Backgrounds and Borders جزئیات کامل استاندارد را ارائه می دهند.