CSS Border Images

ویژگی border-image این امکان رو میده که به جای یک خط ساده برای border، از یک تصویر استفاده کنیم.
این قابلیت خیلی در طراحی‌های خاص (مثل کارت‌ها، قاب عکس، دکمه‌های فانتزی و …) کاربرد داره.

✨ سینتکس کلی

selector { border: 10px solid transparent; /* باید border داشته باشیم */ border-image-source: url("image.png"); border-image-slice: 30; border-image-repeat: stretch; }

🔹 ۱. خاصیت border-image-source

این ویژگی منبع تصویر رو مشخص می‌کنه:

box { border: 15px solid transparent; border-image-source: url("border.png"); }

🔹 ۲. خاصیت border-image-slice

این ویژگی مشخص می‌کنه تصویر از کجا برش بخوره.
(با استفاده از پیکسل یا درصد)

box { border: 20px solid transparent; border-image-source: url("border.png"); border-image-slice: 30; }

📌 یعنی تصویر به ۹ بخش تقسیم میشه: چهار گوشه، چهار ضلع، و وسط.

🔹 ۳. خاصیت border-image-repeat

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

  • stretch → کشیده میشه (پیش‌فرض)

  • repeat → تکرار میشه

  • round → تکرار میشه و اگر جا اضافی بمونه مقیاس تغییر می‌کنه

  • space → تکرار میشه ولی فاصله بین تکرارها اضافه میشه

مثال:

box { border: 20px solid transparent; border-image-source: url("border.png"); border-image-slice: 30; border-image-repeat: repeat; }

🔹 ۴. خاصیت border-image-width

عرض تصویر مرزی رو مشخص می‌کنه (اختیاریه).

box { border: 20px solid transparent; border-image-source: url("border.png"); border-image-slice: 30; border-image-width: 15px; }

🔹 ۵. نوشتن به صورت کوتاه (Shorthand)

box { border: 20px solid transparent; border-image: url("border.png") 30 round; }

📌 ترتیب:
border-image: source slice repeat;

✅ نکات مهم

  1. همیشه باید یه border (مثلاً solid transparent) تعریف بشه.

  2. border-image-slice مهم‌ترین بخشه چون تعیین می‌کنه کجا تصویر بریده بشه.

  3. بیشتر در طراحی‌های خاص و تزئینی استفاده میشه.