تعریف

outline مثل مرز (border) هست اما چند تفاوت مهم داره:

• بیرون‌تر از border رسم میشه.

• روی ابعاد عنصر (width و height) تأثیر نمیذاره.

• نمی‌تونه گوشه گرد (border-radius) داشته باشه.

• معمولا برای تمرکز (focus) روی یک المان مثل فرم‌ها استفاده میشه.

🔑 خصوصیات outline

1) outline-style

نوع خط Outline رو مشخص می‌کنه.

div {
  outline-style: solid;
}

مقادیر: solid, dashed, dotted, double, none

2) outline-color

رنگ Outline رو تعیین می‌کنه.

div {
  outline-color: red;
}

3) outline-width

ضخامت Outline رو تعیین می‌کنه.

div {
  outline-width: 3px;
}

مقادیر: عدد (px, em, rem) یا کلیدواژه‌ها (thin, medium, thick)

4) outline (شورت هند)

می‌تونی همه خصوصیات رو یکجا بنویسی:

div {
  outline: 3px dashed blue;
}

5) outline-offset

فاصله بین border و outline رو مشخص می‌کنه.

div {
  border: 2px solid black;
  outline: 3px solid red;
  outline-offset: 5px;
}

🎯 مثال عملی

input:focus {
  outline: 3px solid blue;
  outline-offset: 4px;
}

🔹 وقتی روی input کلیک کنی، یک خط آبی دورش ظاهر میشه.

⚡ تفاوت Border و Outline