ویژگی 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. بیشتر در طراحی‌های خاص و تزئینی استفاده میشه.