الخاصية `outline`

الخاصية outline في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات outline-style و outline-width و outline-color في آنٍ واحد.

بطاقة الخاصية

القيمة الابتدائية	لكل خاصية مختصرة: `outline-color`: `currentColor` `outline-style`: `none` `outline-width`: `medium`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	نعم
القيمة المحسوبة	لكل خاصية مختصرة: `outline-color`: قيمة لونية `outline-style`: كما حُدِّدَت. `outline-width`: طول مطلق، إلا إذا حُدِّدَت الكلمة المحجوزة `none` فستكون القيمة المحسوبة `0`.

/* width | style | color */
outline: 1px solid white;

/* القيم العامة */
outline: inherit;
outline: initial;
outline: unset;

حدود العنصر (outline) هي الخطوط المرسومة خارج إطار العنصر لجعله بارزًا في الصفحة، وتُستعمَل عادةً لأغراض لها علاقة بقابلية الوصول، أو لأغراض تزيينية.

الحدود شبيهة بالإطار border في أنها تُرسَم حوال العنصر، ولها نفس الأشكال التي تتوافر للإطارات، لكنها تختلف عنها فيما يلي:

لا تأخذ حدود العنصر مساحةً إضافيةً، فهي ليست جزءًا من النموذج الصندوقي (box model) وبالتالي لن تُساهم أو تؤثِّر على أبعاد العنصر، وهذا يعني أنَّ إضافة الحدود أو إزالتها من عنصر لن تؤثر على موضعه في الصفحة أو موضع بقية العناصر التي بجواره.
ستُرسَم الحدود على الأطراف الأربعة للعنصر، ولا يمكننا تحديد الأطراف التي نريد رسم الحدود عليها.
لا يمكن تطبيق حواف مدورة على الحدود، كما نفعل مع الإطارات عبر الخاصية border-radius.
قد تكون الحدود غير مستطيلة الشكل، وذلك إن كانت بعض أجزاء العنصر بخطٍ ذي حجمٍ أكبر من غيرها، ولا يُطبَّق ذلك إلا في بعض المتصفحات مثل الإصدارات القديمة من متصفح Opera.

مثال عن قاعدتين متماثلتين للخاصية outline:

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.5	8.0	7.0	1.2

الخاصية outline تقبل قيمةً واحدةً أو قيمتين أو ثلاث قيم من القيم التالية، لاحظ أنَّ ترتيب القيم غير مهم.

ضبط عرض حدود العنصر، راجع صفحة العنصر outline-width لمزيدٍ من المعلومات.

ضبط شكل حدود العنصر، راجع صفحة العنصر outline-style لمزيدٍ من المعلومات.

ضبط لون حدود العنصر، راجع صفحة العنصر outline-color لمزيدٍ من المعلومات.

outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ];

يمكن أن ترد القيم بأي ترتيبٍ تشاء.